加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

你可以更改路径而不重新加载AngularJS中的控制器?

发布时间:2020-12-17 09:21:30 所属栏目:安全 来源:网络整理
导读:它以前被问过,从答案,它看起来不好。我想问这个示例代码考虑… 我的应用程序加载当前项目在提供它的服务。有几个控制器操作项目数据,而不重新加载项目。 如果尚未设置,我的控制器将重新加载该项目,否则,它将使用服务当前加载的项目,在控制器之间。 问
它以前被问过,从答案,它看起来不好。我想问这个示例代码考虑…

我的应用程序加载当前项目在提供它的服务。有几个控制器操作项目数据,而不重新加载项目。

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

问题:我想为每个控制器使用不同的路径,而不重新加载Item.html。

这是可能吗?

2)如果这是不可能的,有一个更好的方法,每个控制器有一个路径vs我在这里想到的?

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',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,MyService) {
  $scope.view = {name: 'foo',template: 'partials/itemFoo.html'};
  itemCtrlInit($scope,MyService);
}
function itemBarCtrl($scope,MyService) {
  $scope.view = {name: 'bar',template: 'partials/itemBar.html'};
  itemCtrlInit($scope,MyService);
}

解析度。

状态:使用接受答案中建议的搜索查询允许我提供不同的网址,而不重新加载主控制器。

app.js

var app = angular.module('myModule',controller: ItemsCtrl}).
      when('/item/:itemId/',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,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 = …

如果您不必使用#/ item / {{item.id}} / foo和#/ item / {{item.id}} / bar等网址,但#/ item / {{item.id}} / ?foo和#/ item / {{item.id}} /?bar,您可以为/item/{{item.id}}/设置路由,将reloadOnSearch设置为false( docs.angularjs.org/api/ngRoute.$routeProvider)。这告诉AngularJS不重新加载视图,如果url的搜索部分更改。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读