Nó đã được hỏi trước đó và từ những câu trả lời có vẻ không ổn. Tôi muốn hỏi về mã mẫu này để xem xét ...
Ứng dụng của tôi tải mục hiện tại trong dịch vụ cung cấp nó. Có một số bộ điều khiển thao tác dữ liệu vật phẩm mà không cần tải lại vật phẩm.
Bộ điều khiển của tôi sẽ tải lại vật phẩm nếu nó chưa được đặt, nếu không, nó sẽ sử dụng vật phẩm hiện được tải từ dịch vụ, giữa các bộ điều khiển.
Vấn đề : Tôi muốn sử dụng các đường dẫn khác nhau cho mỗi bộ điều khiển mà không cần tải lại Item.html.
1) Điều đó có thể không?
2) Nếu điều đó là không thể, có cách nào tốt hơn để có một đường dẫn cho mỗi bộ điều khiển so với những gì tôi nghĩ ra ở đây không?
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'});
}]);
Mục.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>
control.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);
}
Nghị quyết.
Trạng thái : Sử dụng truy vấn tìm kiếm như được đề xuất trong câu trả lời được chấp nhận cho phép tôi cung cấp các url khác nhau mà không cần tải lại bộ điều khiển chính.
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'});
}]);
Mục.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>
control.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');
}
});
}
});
Nội dung bên trong các phần của tôi được gói bằng ng-controller=...