之前有人问过这个问题,从答案来看它看起来并不好。我想考虑一下此示例代码…
我的应用程序将当前项目加载到提供它的服务中。有几个控制器可以在不重新加载商品的情况下操纵商品数据。
如果尚未设置,我的控制器将重新加载该项目,否则,它将在控制器之间使用该服务中当前加载的项目。
问题 :我想为每个控制器使用不同的路径,而无需重新加载Item.html。
1)有可能吗?
2)如果这不可能,那么与我在这里提出的相比,是否有更好的方法为每个控制器设置路径?
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', {templateUrl: 'partials/item.html', 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, $routeParams, MyService) { $scope.view = {name: 'foo', template: 'partials/itemFoo.html'}; itemCtrlInit($scope, $routeParams, MyService); } function itemBarCtrl($scope, $routeParams, MyService) { $scope.view = {name: 'bar', template: 'partials/itemBar.html'}; itemCtrlInit($scope, $routeParams, MyService); }
解析度。
状态 :按照接受的答案中的建议使用搜索查询,这使我可以提供不同的URL,而无需重新加载主控制器。
var app = angular.module('myModule', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/items', {templateUrl: 'partials/items.html', controller: ItemsCtrl}). when('/item/:itemId/', {templateUrl: 'partials/item.html', controller: ItemCtrl, reloadOnSearch: false}). otherwise({redirectTo: '/items'}); }]);
<!-- 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>
function ItemCtrl($scope, $routeParams, Appts) { $scope.views = { foo: {name: 'foo', template: 'partials/itemFoo.html'}, bar: {name: 'bar', template: 'partials/itemBar.html'}, } $scope.view = $scope.views[$routeParams.view]; }
指令.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=...
ng-controller=...
如果你没有使用像的URL #/item/{{item.id}}/foo和#/item/{{item.id}}/bar而#/item/{{item.id}}/?foo和#/item/{{item.id}}/?bar,而不是,你可以设置你的路线/item/{{item.id}}/有reloadOnSearch设置为false(https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)。这告诉AngularJS如果URL的搜索部分发生更改,则不要重新加载视图。
#/item/{{item.id}}/foo
#/item/{{item.id}}/bar
#/item/{{item.id}}/?foo
#/item/{{item.id}}/?bar
/item/{{item.id}}/
reloadOnSearch
false