javascript - 使用指令从另一个 Controller 更新 $scope

Question

我有一个页面，其中在主要内容区域中列出了多种类型的“图 block ”( <div> )，标题中包含充当过滤器的链接列表。

例如在标题区域中，单击“pdf”过滤器链接 - 仅包含 ng-show="showFiles['pdf'] 的图 block 将显示。如果单击“视频”，则会平铺 ng-show="showFiles['video']将显示等等..

标题模板由 hdrController 控制和瓷砖 pageController .

最初，当 View 加载 $scope 变量 showFiles 时在pageController从服务接收对象 Tweaks它将所有项目设置为 true(从而在启动时显示所有图 block ):

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仅显示特定过滤器类型的图 block 。

参见Plunkr - $scope的pageController其中包含 showFiles对象不会更新，因此不会反射(reflect)更改。

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

Answer 1

您总是创建一个新的“obj” - 因此 Controller 中的引用不会更新。无论如何，您应该始终通过服务功能访问数据/状态。 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;
});