Question

我有一个页面，其中列出了多种类型的瓷砖＆＃39; （<div>＆＃39; s）在主内容区域和标题中，其中包含充当过滤器的链接列表。

E.g。在标题区域中，点击“＆lt; pdf＆＃39;过滤器链接 - 仅显示具有ng-show="showFiles['pdf']的图块。如果＆＃39;视频＆＃39;单击，将显示ng-show="showFiles['video']的图块，依此类推..

标题模板由hdrController控制，平铺由pageController控制。

最初，当视图加载showFiles中的$ scope变量pageController时，会从服务Tweaks接收一个对象，该对象将所有项设置为true（从而在启动时显示所有切片）：

testApp.controller('pageController', ['$scope', 'Tweaks', function($scope, Tweaks){
  $scope.showFiles = Tweaks.tagFilters('all');
}]);

testApp.factory('Tweaks', function(){
  var tweaksFactory = {};
  var obj = {};

  tweaksFactory.tagFilters = function(filter) {
    if(filter == 'all') {
      obj = {
        'video' : true,
        'pdf' : true,
        'doc' : true
      };
    } else {
      obj = {
        'video' : false,
        'pdf' : false,
        'doc' : false
      };
    }
    return obj;
  };
  return tweaksFactory;
});

问题：点击过滤器链接时，会应用一个检测点击次数的指令 - 然后需要更新$scope.showFiles以仅显示特定过滤器类型的图块。

请参阅Plunkr - 包含$scope对象的pageController的{{1}}不会更新，因此不会反映更改。

有人可以提供任何建议吗？我是Angular的新手 - 这种方法是实现结果的最佳方法吗？

Answer 1

与两个或多个控制器的通信是通过服务和事件完成的，您可以通过添加新服务来播放消息

testApp.factory('mySharedService', function($rootScope) {
    var sharedService = {};

    sharedService.prepForBroadcast = function(msg) {
        $rootScope.$broadcast('handleBroadcast', msg);
    };

    return sharedService;
});

您可以使用此服务查看更新的代码，以允许指令与控制器通信： http://plnkr.co/edit/M3RECJmZa64cxKtpWeHO?p=info

Answer 2

您始终创建一个新的'obj' - 因此控制器中的引用将不会更新。无论如何，您应该始终通过服务功能访问数据/状态。 plnkr

  testApp.factory('Tweaks', function(){
  var tweaksFactory = {};
  var obj = {};

  tweaksFactory.tagFilters = function(filter) {
    if(filter == 'all') {
      obj = {
        'video' : true,
        'pdf' : true,
        'doc' : true
      };
    } else {
      obj = {
        'video' : false,
        'pdf' : false,
        'doc' : false
      };
      obj[filter] = true;
    }
    console.log('alter the object - so it reflects in the scope');
    console.log(obj);
    return obj;
  };
  tweaksFactory.show = function(type) {
    console.log(obj, type);
    return obj[type];
  };
  return tweaksFactory;
});

使用指令从另一个控制器更新$ scope

2 个答案: