Question

我有一个使用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}}

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

谢谢。

Answer 1

弄清楚出了什么问题。

我必须创建辅助导航的html模板。然后我在admincontroller中包含了web服务调用，将对象值设置为webservice结果并将其添加到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'
 }
});

将参数传递给angular js指令局部视图

1 个答案: