以前有人问过这个问题,从答案上看,情况并不乐观。考虑到这个示例代码,我想问一下...
我的应用程序将当前项目加载到提供它的服务中。有几个控制器可以在不重新加载项目的情况下操作项目数据。
如果项目尚未设置,我的控制器将重新加载该项目,否则,它将在控制器之间使用服务中当前加载的项目。
Problem:我希望在不重新加载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);
}
解决方案。
Status:按照接受答案中的建议使用搜索查询允许我提供不同的urls,而无需重新加载主控制器。
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
<!-- 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, $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
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');
}
});
}
});
partials中的内容是用ng-controller=...
包装的
发布于 2013-02-20 15:27:31
如果您不必使用像#/item/{{item.id}}/foo
和#/item/{{item.id}}/bar
这样的URL,而是使用#/item/{{item.id}}/?foo
和#/item/{{item.id}}/?bar
,那么您可以为/item/{{item.id}}/
设置路由,将reloadOnSearch
设置为false
(https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)。这将告诉AngularJS,如果url的搜索部分发生更改,则不会重新加载视图。
发布于 2014-06-08 09:14:36
如果您需要更改路径,请在应用程序文件中的.config后面添加以下内容。然后,您可以执行$location.path('/sampleurl', false);
以防止重新加载
app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
var original = $location.path;
$location.path = function (path, reload) {
if (reload === false) {
var lastRoute = $route.current;
var un = $rootScope.$on('$locationChangeSuccess', function () {
$route.current = lastRoute;
un();
});
}
return original.apply($location, [path]);
};
}])
归功于https://www.consolelog.io/angularjs-change-path-without-reloading,它是我找到的最优雅的解决方案。
发布于 2014-11-18 07:30:38
为什么不把ng-controller放到更高的级别,
<body ng-controller="ProjectController">
<div ng-view><div>
并且不要在路由中设置控制器,
.when('/', { templateUrl: "abc.html" })
这对我很管用。
https://stackoverflow.com/questions/14974271
复制相似问题