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，并从指令的link函数调用该控制器的函数。请参阅：AngularJs - Use custom filter inside directive controller

Answer 2

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

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

2 个答案: