Как включить фильтр в пользовательскую директиву

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, а не в формате HTML с угловым выражением?

Благодаря

Answer 1

Ответ на ваш первый вопрос, директива должна быть объявлена ​​в ГорбатыйРегистр. Итак, объявите директиву следующим образом:

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

И назовите это так, как вы сейчас делаете.

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

Это должно принять вас внутри директивного кода.

Для вашего второго вопроса вы должны использовать директивный контроллер. Просто создайте контроллер для этой директивы, введите $ filter в этот контроллер и вызовите функцию этого контроллера из функции ссылок вашей директивы. AngularJs - Use custom filter inside directive controller

Answer 2

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