傳遞過濾器作爲角度指令參數

我想通過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

傳遞過濾器作爲角度指令參數

回答

相關問題