3

我想制作角度指令，在其中对作为参数传递的数据使用过滤器。

所以是这样的：

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

其中“data”是指令“my-module”的属性。我查看了 ngRepeat 源，但他们解析 ng-repeat 参数，然后评估它们。我不能使用 ng-repeat，因为我正在从数据参数创建对象的新实例（地图的标记）。

真的有那么难吗？是否可以在自定义指令中执行此操作以及如何执行此操作？

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

编辑

我正在尝试扩展此地图包装器以呈现过滤标记。

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

使用此解决方案，我们需要保存所有标记的两个副本（~500）。

4

3 回答 3

3

您可以$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.

于 2013-06-07T02:54:00.010 回答
0

我认为你混合了一些东西。我不确定你为什么不想使用ng-repeat，这就是它的用途。因为您隔离了您无权访问父范围的范围。绑定尝试将'='您的隔离范围数据属性绑定到父范围的模型，称为属性中的内容，但您不能绑定到已过滤的内容。如果您不想使用属性重复 div，请将它们放在您自己的元素上，它只会创建内容......

这是一个使用 ng-repeat 的小提琴。您可以看到绑定是 2-way，它添加了一个updated: true属性。

（小提琴）

    link: function (scope, element, attrs, ctrl) {
        element.append('<p>a: ' + scope.data.a + ', b: ' + scope.data.b);
        scope.data.updated = true;
    }
于 2013-06-07T03:26:00.323 回答
0

因此，当我使用单向绑定时，我在 $watch 中得到了空数组（我认为它正在尝试在本地范围内评估 [从指令范围中删除“数据”以进行单向绑定]。当我使用双向绑定时 [在指令范围内是{data: "=data"}] 我收到错误“观察者在最后 5 次迭代中被触发”（这是角度过滤的常见错误）。

所以我的解决方案：

指示：

...
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>

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

于 2013-06-07T06:11:31.227 回答