ng-bind échoue lors de l'utilisation d'un filtre personnalisé

Question

J'ai parcouru un certain nombre de réponses et je ne peux pas comprendre pourquoi mon code ne fonctionne pas!

Je souhaite appliquer un filtre personnalisé simple à une variable transmise par le contrôleur. La valeur room-price s'affiche correctement. Toutefois, lorsque j'ajoute le filtre price-per-night, la valeur disparaît.

Quelqu'un peut-il suggérer une solution? Merci

Modèle

<div class="h3 left-align p1" ng-bind="room.price | price-per-night"></div> 

contrôleur

routerApp.controller('MyController', function($scope) { 
    $scope.rooms = [ 
    { 
     name: 'Basic', 
     price: 50 
    }] 
}); 

Filtre

routerApp.filter("price-per-night", 
    function() { 
     return function(price) { 
      var output = '£' + price + ' ' + 'per night'; 
      return output; 
     }; 
    } 
); 

Answer 1

Nommez votre filtre pricePerNight. - n'est pas autorisé au nom:

routerApp.filter("pricePerNight", 
    function() { 
     return function(price) { 
      var output = '£' + price + ' ' + 'per night'; 
      return output; 
     }; 
    } 
); 

(Vous utilisez toujours price-per-night dans votre code HTML)