2014-10-08 79 views
1

我有一个使用angularJS的MVC应用程序。我有一个主要的导航和辅助导航。我正在使用ngRoute进行主导航。我制作了辅助导航模板,这是我可以在所有其他页面中使用的指令。指令中使用的模板需要一些输入参数。将参数传递给角度js指令局部视图

路由代码:

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

Web方法代码:

[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> 

当我运行的应用程序,我没有看到项目1和项目2的页面,而不是我看到{{对象}}

请指教一下我的传球很想念指令中使用的模板的参数。

谢谢。

回答

0

想通哪里出了问题。我不得不创建一个辅助导航的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' 
} 
});