传递过滤器作为角度指令参数

我想通过w过滤器作为参数在我的应用程序中的自定义指令。我想这样做：在应用传递过滤器作为角度指令参数

用法：

<my-directive data='dataVariable' dataFilter='numericFilter: 123'/>

指令模板：

<span> {{ data | dataFilter }} </span>

指令：

... 
scope: { 
    data: '=', 
    dataFilter: '@' 
} 
...

当我这样做是因为shwon上面我获取与语法相关的错误（:未被识别），依赖注入（过滤器不是发现）或者过滤器根本不做任何事情。

来源

2014-10-29 mrzasa

你'dataFilter'属性应该是'数据filter'。那么'dataFilter'属性如何在指令中工作？显示您的'my-directive'的内容 – 2014-10-29 12:43:29

'dataFilter'不在指令代码中使用。它只需要格式化HTML输出。 – mrzasa 2014-10-29 12:44:27

可以动态使用过滤服务得到你想要的过滤器：

angular.module('app').directive('myDir', ['$filter', function($filter) { 
.... 
    link: function($scope, $el, $attr) { 
      var desiredFilter = $filter($attr['dataFilter']); 
     //desiredFilter is now a function that will run the filter passed, it will throw exception if filter is not found 
     } 
}

我希望这有助于。

来源

2014-10-29 13:01:26 PiniH

您可以根据您的属性在编译函数中建立表达式。但是，我会建议使用$ filter来建议@PinhasHouri。

http://plnkr.co/edit/B3UM4CMTQ1BjTR2zK7IP?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 
    <div apply-filter 
     filter-data="Hello" 
     filter-expr="append:'C'"></div> 

    <script> 
     var app = angular.module("app",[]); 

     app.directive("applyFilter",function(){ 
     return{ 
      filterExpr: "@", 
      filterData: "@", 
      compile: function(element,attrs){ 
      element.append("{{'" + attrs.filterData + "'|" + attrs.filterExpr + "}}"); 
      } 
     } 
     }); 

     app.filter("append",function(){ 
     return function(v,p){ 
      return v + p; 
     } 
     }); 

     angular.bootstrap(document,["app"]); 
    </script> 
    </body> 

</html>

来源

2014-10-29 13:24:50 mccainz

传递过滤器作为角度指令参数

回答

相关问题