将参数传递给 Angular js 指令局部视图答案

【问题标题】：pass parameters to angular js directive partial view将参数传递给 Angular js 指令局部视图
【发布时间】：2014-10-08 19:17:07
【问题描述】：

我有一个使用 angularJS 的 MVC 应用程序。我有一个主导航和辅助导航。我正在使用 ngRoute 进行主导航。我将辅助导航模板设为可以在所有其他页面中使用的指令。指令中使用的模板需要一些输入参数。

路由代码：

myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/SecondaryNavigation/1', {
        templateUrl: 'administration/Page1',
        resolve: {                   
            SecNavItems: ["$http", function($http){
                var navItems = $http.get('/Navigation/SecondaryNavigation', {params: { pageName:            'Administration'}});
                navItems.success(function (data) {
                    return data;
                });
            }]
        },
        controller: 'AdminController'
})}]);

var AdminController = function ($scope, SecNavItems) {
$scope.secList = SecNavItems;
}

AdminController.$inject = ["$scope", "SecNavItems"];
myApp.controller("AdminController", AdminController);

网页方法代码：

    [HttpGet]
    public JsonResult SecondaryNavigation(string pageName)
    {
        Dictionary<string, string> secnavItems = new Dictionary<string, string>();
        secnavItems.Add("1", "Item1");
        secnavItems.Add("2", "Item2");
        var navigationItemsJson = Json(secnavItems, JsonRequestBehavior.AllowGet);
        return navigationItemsJson;
    }

第1页代码是

<secondary-navigation></secondary-navigation>

我的指令定义如下：

myApp.directive("secondaryNavigation", function () {
return {
    restrict: 'E',
    scope: {},
    templateUrl: '/navigation/secondaryNavigation'
}
});

局部视图模板：

<div style="height:100%; width:25%; background-color:#675c5c; color: white; float:left">
    @foreach (KeyValuePair<int, string> navItem in secList)
    {
        <a href="/#/@navItem.Key">@navItem.Value</a><br /><br />
    }
</div>
<div style="height:100%; width:75%; float:right"></div>

当我运行应用程序时，我在页面中看不到 Item1 和 Item2，而是看到 {{object}}

请告知我在将参数传递给指令中使用的模板时缺少什么。

谢谢。

【问题讨论】：

标签： angularjs-directive angularjs-routing

【解决方案1】：

想出了什么问题。

我必须创建一个二级导航的 html 模板。然后，我将 Web 服务调用包含在 admincontroller 中，将对象值设置为 Web 服务结果并将其添加到 routeProvider。我那时在指令中将范围设置为 false。

以下是我所做的更改。

路由代码：

myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/SecondaryNavigation/1', {
        templateUrl: 'administration/Page1',
        controller: 'AdminController'
})}]);

var AdminController = function ($scope, $http) { 
            var navItems = $http.get('/Navigation/SecondaryNavigation', {params: { pageName:                'Administration'}});
            navItems.success(function (data) {
                $scope.secList = data;
            });
        }]
    },
}

AdminController.$inject = ["$scope", "$http"];
myApp.controller("AdminController", AdminController);

我的指令定义如下：

myApp.directive("secondaryNavigation", function () {
return {
    restrict: 'E',
    scope: false,
    templateUrl: '/navigation/secondaryNavigation'
 }
});

【讨论】：