Question

我有两个单独的Angular控制器，一个在主要内容区域（homeCtrl）显示事件列表，另一个在侧边栏（sidebarCtrl）中显示事件标记列表。 / p>

// 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"
  }];

我希望如果用户开始关注侧边栏中的标记，则标签会在侧边栏和主页Feed中突出显示。如果我们只是试图在侧边栏中突出显示它，这很容易：

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

但我不知道如何在主页Feed中突出显示该标记颜色的所有实例。通过给文档中的每个标记实例提供一个tag_17类（或者标记碰巧的ID），它在jQuery中会非常容易，但它可以很好地避免jQuery并使用Angular＆＃ 39;如果可能的话，数据绑定范例。

有什么建议吗？

Answer 1

创建一个名为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>

两个控制器都将包含对同一个对象的引用，因此它们会在角度的$ digest周期中看到该对象的相互更改，并且所有内容都将得到适当更新。

或者，您可以在服务中使用过滤器，使用提供的服务中的过滤器重复本地标记数组。

编辑：以下是如何执行此操作的示例：

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

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

根据另一个控制器的ng-repeat属性更新一个控制器中的ng-repeat属性？

1 个答案: