你可以改变而无需重新加载在AngularJS控制器的路径？ [英] Can you change a path without reloading the controller in AngularJS?

问题描述

它已经问过，从它的答案看起来并不好。我想问，在审议该样品code ...

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）如果这是不可能的，有没有更好的方法来有每个控制器的路径VS什么，我想出了在这里？

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

Item.html

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

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

Item.html

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

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

directives.js

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-控制器= ...

推荐答案

如果你没有使用像＃/项目/ {{item.id}} /富和＃/项目/ {{item.id}} /条，但＃/项目/ {{item.id}} /？富和＃/项目/ {{item.id}} /？酒吧相反，你可以设置你的路线为 /项目/ {{item.id}} / 有reloadOnSearch设置为false（<一个href=\"http://docs.angularjs.org/api/ngRoute.%24routeProvider\">docs.angularjs.org/api/ngRoute.$routeProvider).这告诉AngularJS不重装视图如果该URL改变搜索的部分。

If you don't have to use URLs like #/item/{{item.id}}/foo and #/item/{{item.id}}/bar but #/item/{{item.id}}/?foo and #/item/{{item.id}}/?bar instead, you can set up your route for /item/{{item.id}}/ to have reloadOnSearch set to false (docs.angularjs.org/api/ngRoute.$routeProvider). That tells AngularJS to not reload the view if the search part of the url changes.

这篇关于你可以改变而无需重新加载在AngularJS控制器的路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！