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

我有一个页面，在主内容区域中列出了多种类型的“tile”（

），还有一个标题，标题中有一个链接列表，用作过滤器

例如，在标题区域中，单击“pdf”过滤器链接-仅显示具有

ng show=“showFiles['pdf']

的磁贴。如果单击“视频”，则将显示具有

ng show=“showFiles['video']

的磁贴，依此类推

页眉模板由

hdrController

控制，平铺由

pageController

控制

最初，当视图在

pageController

中加载$scope变量

showFiles

时，从服务

Tweaks

接收对象，该服务将所有项目设置为true（从而在启动时显示所有分幅）：

问题：单击过滤器链接时，会应用一个指令来检测单击-然后需要更新

$scope.showFiles

以仅显示特定过滤器类型的分幅

请参阅-包含

showFiles

对象的

$scope

不更新，因此不会反映更改

---

有人能提供一些建议吗？我不熟悉Angular-这种方法是实现效果的最佳方法吗？

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

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

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

    return sharedService;
});

您可以看到使用此服务更新的代码，以允许指令与控制器通信：

---

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

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

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

    return sharedService;
});

  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;
});