Angular Custom Directive调用MVC Action将partial注入div

时间:2016-01-15 17:04:06

标签: angularjs asp.net-mvc

我正在尝试将来自几篇不同文章和一些Pluralsight视频的自定义指令拼凑起来。

我对MVC适度,但对于角度来说却是全新的。

我希望我的角度调用MVC控制器。控制器返回部分。然后一个自定义角度指令插入div占位符的部分html。

然而,我在F12控制台中遇到了角度错误,但不知道如何调试。

我有三个组成部分。

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");
        }

我确定我的app-MainNav中的问题是我如何配置Angular App Directive。

错误是一个意外的令牌,但根据教程,我几乎跟随他们的例子。

TIA

1 个答案:

答案 0 :(得分:1)

您正在尝试手动执行已使用templateUrl内置的内容,如果该模板尚未存储在缓存中,则会请求该模板

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

这也有利于在插入html之前不运行任何相关的控制器代码