Angular Custom 指令调用 MVC Action 将部分注入 div

Question

我正在尝试从几篇不同的文章和几个Pluralsight视频中拼凑出一个自定义指令。

我对MVC还算可以，但对角度完全陌生。

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

但是，我在 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);
                });
            }
        };
    });
})();

导航控制器.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");
        }

我

确定问题出在我的应用程序主导航中，我如何配置 Angular 应用程序指令。

该错误是意外令牌，但根据教程，我几乎遵循了他们的例子。

蒂亚

Answer 1

您正在尝试手动执行已内置的操作，templateUrl如果该模板尚未存储在缓存中，它将对该模板发出请求

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

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