它以前被问过,从答案,它看起来不好。我想问这个示例代码考虑…
我的应用程序加载当前项目在提供它的服务。有几个控制器操作项目数据,而不重新加载项目。
如果尚未设置,我的控制器将重新加载该项目,否则,它将使用服务当前加载的项目,在控制器之间。
问题:我想为每个控制器使用不同的路径,而不重新加载Item.html。
这是可能吗?
2)如果这是不可能的,有一个更好的方法,每个控制器有一个路径vs我在这里想到的?
app.js
var app = angular.module('myModule',[]). config(['$routeProvider',function($routeProvider) { $routeProvider. when('/items',{templateUrl: 'partials/items.html',controller: ItemsCtrl}). when('/items/:itemId/foo',{templateUrl: 'partials/item.html',controller: ItemFooCtrl}). when('/items/:itemId/bar',controller: ItemBarCtrl}). otherwise({redirectTo: '/items'}); }]);
Item.html
<!-- Menu --> <a id="fooTab" my-active-directive="view.name" href="#/item/{{item.id}}/foo">Foo</a> <a id="barTab" my-active-directive="view.name" href="#/item/{{item.id}}/bar">Bar</a> <!-- Content --> <div class="content" ng-include="" src="view.template"></div>
controller.js
// Helper function to load $scope.item if refresh or directly linked function itemCtrlInit($scope,$routeParams,MyService) { $scope.item = MyService.currentItem; if (!$scope.item) { MyService.currentItem = MyService.get({itemId: $routeParams.itemId}); $scope.item = MyService.currentItem; } } function itemFooCtrl($scope,MyService) { $scope.view = {name: 'foo',template: 'partials/itemFoo.html'}; itemCtrlInit($scope,MyService); } function itemBarCtrl($scope,MyService) { $scope.view = {name: 'bar',template: 'partials/itemBar.html'}; itemCtrlInit($scope,MyService); }
解析度。
状态:使用接受答案中建议的搜索查询允许我提供不同的网址,而不重新加载主控制器。
app.js
var app = angular.module('myModule',controller: ItemsCtrl}). when('/item/:itemId/',controller: ItemCtrl,reloadOnSearch: false}). otherwise({redirectTo: '/items'}); }]);
Item.html
<!-- Menu --> <dd id="fooTab" item-tab="view.name" ng-click="view = views.foo;"><a href="#/item/{{item.id}}/?view=foo">Foo</a></dd> <dd id="barTab" item-tab="view.name" ng-click="view = views.bar;"><a href="#/item/{{item.id}}/?view=foo">Bar</a></dd> <!-- Content --> <div class="content" ng-include="" src="view.template"></div>
controller.js
function ItemCtrl($scope,Appts) { $scope.views = { foo: {name: 'foo',template: 'partials/itemFoo.html'},bar: {name: 'bar',template: 'partials/itemBar.html'},} $scope.view = $scope.views[$routeParams.view]; }
directives.js
app.directive('itemTab',function(){ return function(scope,elem,attrs) { scope.$watch(attrs.itemTab,function(val) { if (val+'Tab' == attrs.id) { elem.addClass('active'); } else { elem.removeClass('active'); } }); } });
我的部分内容被包装ng-controller = …
如果您不必使用#/ item / {{item.id}} / foo和#/ item / {{item.id}} / bar等网址,但#/ item / {{item.id}} / ?foo和#/ item / {{item.id}} /?bar,您可以为/item/{{item.id}}/设置路由,将reloadOnSearch设置为false(
docs.angularjs.org/api/ngRoute.$routeProvider)。这告诉AngularJS不重新加载视图,如果url的搜索部分更改。