如何在自定义指令中包含过滤器

Question

我是Angular JS的新手，自定义指令遇到了麻烦。 我试图复制一个教程，但无法使用自己的代码来运行它。 这是我的HTML的相关部分：

<div ng-controller="calcController" class="container">
<div class="form-group">
<label for="balInput">Balance:</label>
<input id="balInput" type="text" class="form-control" ng-model="balance" ng-change="updateAnnualInt(balance)" placeholder="Please enter your balance here...">
</div> 
<p>{{'At a '+(interestRate)+'% interest rate you would save...'}}</p>
<p style="text-indent: 30px;" ng-repeat="interest in interests">{{'per '+interest.time+': '}}{{(interest.factor*annualInterest*0.01) | currency:'£'}}</p>

首先，我只是试图将最后一段变成自定义指令。 这是我的尝试：

app.directive('interest-amount',function(){
var directive={};
directive.restrict='E';
directive.template="<p style='text-indent: 30px;'>'per '+{{interest.time}}+': '{{(interest.factor*annualInterest*0.01) | currency:'£'}}</p>";

directive.compile=function(element,attributes){
    var linkFunction=function($scope, element,attributes){
        element.html("<p style='text-indent: 30px;'>per "+$scope.interest.time+": "+($scope.interest.factor*$scope.annualInterest*0.01)+"</p>");    
    }
    return linkFunction;
}
return directive;
})

当插入如下代码时，这并没有给出我期望的HTML模板：

<interest-amount ng-repeat="interest in interests"></interest-amount>

我的第一个问题是为什么这不起作用？

我也对如何在linkFunction包含货币过滤器感到困惑。 用Javascript而非Angular支持的HTML编码的语法是什么？

谢谢

Answer 1

回答您的第一个问题，该指令应在驼峰式的情况下声明。 因此，像这样声明指令：

app.directive('interestAmount',function(){

并以您目前的方式来称呼它。

<interest-amount ng-repeat="interest in interests"></interest-amount>

这应该带您进入指令代码。

对于第二个问题，您应该使用指令控制器。 只需为此指令创建一个控制器，在该控制器中注入$ filter并从您指令的链接函数调用该控制器的函数。 请参阅： AngularJs-在指令控制器内使用自定义过滤器

Answer 2

app.directive('interestAmount',function($filter){ // camel case, as @isha aggarwal noted
    $filter('filterName')('argument');
});