你可以在不重新加载 AngularJS 中的控制器的情况下更改路径吗?

之前也有人问过，从答案看不太好.我想问一下这个示例代码......

It's been asked before, and from the answers it doesn't look good. I'd like to ask with this sample code in consideration...

我的应用程序在提供它的服务中加载当前项目.有几个控制器可以在不重新加载项目的情况下操作项目数据.

My app loads the current item in the service that provides it. There are several controllers that manipulate the item data without the item being reloaded.

如果尚未设置，我的控制器将重新加载项目，否则，它将在控制器之间使用当前加载的服务项目.

My controllers will reload the item if it's not set yet, otherwise, it will use the currently loaded item from the service, between controllers.

问题:我想在不重新加载 Item.html 的情况下为每个控制器使用不同的路径.

Problem: I would like to use different paths for each controller without reloading Item.html.

1) 这可能吗?

2) 如果这是不可能的，与我在这里提出的方法相比，是否有更好的方法来为每个控制器设置路径?

2) If that is not possible, is there a better approach to having a path per controller vs what I came up with here?

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'});
    }]);

项目.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

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，而无需重新加载主控制器.

Status: Using search query as recommended in the accepted answer allowed me to provide different urls without reloading the main controller.

app.js

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'});
    }]);

项目.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

controller.js

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=...