그것은 이전에 요청되었으며 대답에서 좋지 않습니다. 이 샘플 코드를 고려하여 물어보고 싶습니다 ...
내 앱은 제공하는 서비스에서 현재 항목을로드합니다. 항목을 다시로드하지 않고 항목 데이터를 조작하는 여러 컨트롤러가 있습니다.
내 컨트롤러는 아직 설정되지 않은 경우 항목을 다시로드합니다. 그렇지 않으면 컨트롤러간에 서비스에서 현재로드 된 항목을 사용합니다.
문제 : 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을 제공 할 수있었습니다.
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');
}
});
}
});
내 부분의 내용은 ng-controller=...
이 답변을 찾았습니다 : stackoverflow.com/a/18551525/632088-reloadOnSearch : false를 사용하지만 검색 막대의 URL 업데이트를 확인합니다 (예 : 사용자가 뒤로 버튼 및 URL 변경을 클릭하는 경우)
—
robert king