angularjs - 在属性中带有过滤器的 Angular 自定义指令

标签 angularjs angularjs-directive angularjs-filter

我想制作 Angular 指令,其中我对作为参数传递的数据使用过滤器。

所以像这样:

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

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

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

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

编辑

我正在尝试扩展这个 map wrapper呈现过滤标记。

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

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

最佳答案

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

关于angularjs - 在属性中带有过滤器的 Angular 自定义指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16975225/

相关文章:

javascript - $watch 与 ng-change、ng-checked 等的 Angular 触发变化

css - 使用 Angularjs 动画在悬停时更改元素

javascript - 公开 View 状态的 AngularJS 指令

javascript - 使用 $provide 重命名第 3 方 Angular 指令 - 不工作

angularjs - 在过滤器函数中注入(inject)依赖项

angularjs - ng-repeat 使用的 Angular 过滤器函数中未定义 `this`

angularjs - 将过滤器分配给 Angular JS 中的对象变量

javascript - AngularJS:表单提交不返回 JSON 中的值

javascript - 如何在指令的 Controller 中访问父 Controller 的范围?

angularjs - 从具有隔离范围的 Angular 指令访问自定义过滤器