Angular Custom Directive call MVC Action inject partial into div

Question

I am trying to piece together a custom directive from several different articles and a couple Pluralsight videos.

I am moderately OK with MVC but completely new to angular.

I want my angular to call MVC controller. The controller return a partial. Then a custom angular directive insert into a div place holder the partial html.

I am however getting angular errors in the F12 console but not sure how to debug.

I have three components.

Index.cshtml

<div class="row">
   <div class="col-md-3" ng-app="app-MainNav">
      <div Dashboard-Main-Nav></div>
   </div>
</div>

app-MainNav.js

(function ()
{
"use-strict";

angular.module("app-MainNav", [])
    .directive("Dashboard-Main-Nav", function ($http)
    {
        return
        {
            restrict: "E",
            link: function($scope, element)
            {
                $http.get("/Navigation/GetDashItems")
                .success(function (data)
                {
                    element.html(data);
                });
            }
        };

    });
})();

NavigationController.cs

        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult GetDashItems()
        {
            var DashItems = _dashboardService.GetDashboardNavigation();
            var results = Mapper.Map<IEnumerable<MLS_DashNav>>(DashItems);

        return PartialView("~/Views/Navigation/_MainNav.cshtml");
        }

I'm sure the problem is in my app-MainNav in how I am configuring the Angular App Directive.

The error is an Unexpected Token but again according to the tutorials I am pretty much following their example.

TIA

charlietfl · Accepted Answer · 2016-01-15 17:16:33Z

1

You are trying to manually do something that is already built in using templateUrl which will make a request for that template if it isn't already stored in cache

angular.module("app-MainNav", [])
    .directive("Dashboard-Main-Nav", function ($http)
    {
        return
        {
            restrict: "E",
            templateUrl: "/Navigation/GetDashItems",
            link:function(){
                // remove ajax
            }

This will also have advantage of not running any related controller code until the html has been inserted

edited Jan 15, 2016 at 17:16

answered Jan 15, 2016 at 17:10

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GPGVM Over a year ago

OOHHH. I thought...in my limited knowledge that a template had to be...like an html template so I thought it had to point to a physical file. But I get it the rendered partial is an html fragment / template so yeah. Thank You!!

Collectives™ on Stack Overflow

Angular Custom Directive call MVC Action inject partial into div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related