Javascript 如何在自定义指令中包含筛选器

我是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模板时，这并没有给出我期望的HTML模板：

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

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

我还对如何在link函数中包含货币过滤器感到困惑。用Javascript而不是HTML对其进行编码的语法是什么

---

感谢您对第一个问题的回答，该指令应以驼峰案例声明。因此，像这样声明指令：

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

用你现在的方式来称呼它

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

这将带您进入指令代码

对于第二个问题，应该使用指令控制器。只需为该指令创建一个控制器，在该控制器中注入$filter，并从指令的link函数调用该控制器的函数。

---

请参阅：

是否必须在链接功能中执行此操作？您可以更轻松地在控制器中执行许多操作。

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