Javascript 基于另一个控制器的ng repeat属性更新一个控制器中的ng repeat属性？

我有两个独立的角度控制器，一个在主内容区（

homeCtrl

）中显示事件列表，另一个在侧栏（

sidebarCtrl

）中显示事件标记列表

// homeCtrl.js
$scope.events = [{
  name: "Example Event Name",
  tags: [
    {  
       "id":7,
       "name":"Imaginon",
       "following": "false"
    },
  ]
}];

在侧栏控制器中，我收集了最常用的标记：

// sidebarCtrl.js
$scope.tags = [  
  {  
     "id":17,
     "name":"MintMuseum",
     "following": "true"
  },
  {  
     "id":7,
     "name":"Imaginon",
     "following": "false"
  }];

我希望这样，如果用户开始跟踪侧栏中的标记，该标记将在侧栏和主提要中高亮显示。如果我们只是想在侧栏中突出显示它，那就很容易了：

// sidebar.html
<div ng-repeat="tag in tags"> 
  <li ng-class="{highlighted: tag.following}" ng-click="followTag(tag)">{{ tag.name }}
</div>

//sidebar.html
{{{tag.name}

但我不知道如何在home提要中突出显示该标记颜色的所有实例。在jQuery中，只需为文档中的每个标记实例提供一个

tag_17

（或者该标记碰巧是什么ID）就非常容易了，但最好避免使用jQuery，如果可能的话，使用Angular的数据绑定范例

---

有什么建议吗

创建一个名为highlightService的服务，例如：

myModule.factory('highlightService', function() {

   var highlighted = [];

   var toggleHighlight = function(tag) {
      var index = highlighted.indexOf(tag);
      if(index > -1) {
         highlighted.splice(index, 1);
      }
      else{
         highlighted.push(tag);
      }
   }

    return {
        highlighted: highlighted,
        highlight: highlight
    }
});

将服务注入控制器，然后为其分配一个局部范围变量：

$scope.highlightService = highlightService;

然后在html中：

<div ng-repeat="tags in highlightService.highlighted">
   <div ng-click="highlightService.highlight(tag)></div>
</div>

---

根据需要在HTML中同时使用服务和筛选器。

您想创建一个服务来保存控制器之间的数据。或者，如果值发生变化，您还需要$watch来监视它们。但是，考虑到这两个控制器的总体数据类型如此不同（即

homeCtrl.js

上的事件中的标记是其父事件对象的嵌套对象），我如何关联这两个控制器之间的标记呢这可能/可行吗？谢谢塔希斯的帮助。我可以看到，当在侧边栏中单击标记时，这将如何用东西填充我们的工厂。然而，我没有看到homeCtrl是如何意识到这一点的。在我上面的代码中，两个控制器的数据来自两个独立的数据库查询，因此不是相同的Javascript对象。它们的相似性在==方面，而不是在===方面。你可以创建一个数组来跟踪突出显示的标记的ID，然后使用ng repeat进行筛选或函数调用。我已经编辑了我的答案，使其具有一个过滤器和服务，在与ID数组匹配后返回相同的标记。哇。我只使用Angular几个月，但我意识到它有多强大。谢谢你的帮助@Tahsis。

myApp.controller('highlightService', [function() {
    var highlightedIDs = [];

    var isHighlighted = function(tag) {
        if(var index = highlightedIDs.indexOf(tag.id) > -1) {
            return index;
        }
        else {
            return false;
        }
    }

    var highlight = function(tag) {
        var index = isHighlighted(tag.id);
        if(index) {
            highlightedIDs.splice(index, 1);
        }
        else {
            highlightedIDs.push(tag.id);
        }
    }

    return {
        isHighlighted: isHighlighted,
        highlight: hilight
    }
}]).filter('highlighted', ['highlightService', function(highlightService) {
    return function(input) {
        if(highlightService.isHighlighted(input) {
            return input;
        }
        else {
            return false;
        }
    };
}]);