带filter属性的Angular自定义指令

Question

我想让角指令，我使用过滤器的数据作为参数传递。

所以像这样:

<div class="my-module" data="a in array | orFilter:filter"></div>

其中"data"是指令"my-module"的属性。我查看了ngRepeat源代码，但是他们解析了n -repeat参数，然后对它们求值。我不能使用ng-repeat，因为我正在从data参数创建对象(Marker for map)的新实例。

真的那么难吗?有可能在自定义指令和如何做到这一点?

我想要的小例子:http://jsfiddle.net/PjRAr/1/

编辑

我正在尝试扩展这个地图包装器来渲染过滤标记。

我的潜在解决方案是持有所有标记和可见标记的副本。添加$watch到过滤器，当过滤器更改时调用$scope.markers = $scope.$eval("allMarkers | orFilter:filter");。

在这个解决方案中，我们需要保留所有标记(~500)的两个副本。

Answer 1

可以$eval过滤表达式

在你的指令链接函数中:

elem.text( scope.$eval( attrs.data ).join(', ') );

:

<div my-directive data="['Hello', 'xxx', 'World'] | filter:'o'"></div>

和指令渲染(通过过滤掉'xxx')到:

Hello, World

编辑 :

如果值是动态的，你当然可以这样做:

scope.$watch( attrs.data, function( arr ) {
  elem.text( arr.join(', ') );
});

我不认为你可以避免$watch，尽管

Answer 2

我觉得你把一些东西混在一起了。我不知道为什么你不想使用ng-repeat，这就是它的目的。因为您隔离了作用域，所以无法访问父作用域。'='绑定试图将您孤立的范围数据属性绑定到父范围的模型，称为属性中的内容，但您不能绑定到已过滤的内容。如果你不想重复div的属性，把它们放在你自己的元素上，它只会创建内容…

下面是使用ng-repeat的示例。你可以看到绑定是双向的，它添加了一个updated: true属性。

(小提琴)

    link: function (scope, element, attrs, ctrl) {
        element.append('<p>a: ' + scope.data.a + ', b: ' + scope.data.b);
        scope.data.updated = true;
    }

Answer 3

所以，当我使用单向绑定时，我在$watch中得到了空数组(我认为它正在尝试在局部范围内评估[从单向绑定的指令范围中删除"数据"]。当我使用双向绑定[在指令范围是{data: "=data"}]时，我得到了错误"在最近5次迭代中触发的观察者"(这是在angular中过滤的常见错误)。

所以我的解决方案是:

指令:

...
scope: {
  data: "=data"
}
...
link: function (scope, element, attrs, ctrl) {
  ...
  scope.$watch("data", function (newValue) {
    angular.forEach(newValue, function (v, i) {
      model.add(v);
    }
  }
}
...

控制器:

  ...
  $scope.filter = { a:true, b:false, ... };
  $scope.all = [..data..];
  $scope.visible = [..data..];    
  $scope.$watch("filter", function(newValue) {    
    $scope.visible = $scope.$eval("all | orFilter:filter"); 
  }, true);
  ...

HTML:

<div my-module data="visible"></div>

非常感谢你们，你们帮了我这么多忙。我学到了很多关于角绑定的新东西