2017-03-14 7 views
0

なぜ "function MsgController($ scope、lovesFilter){"なぜ "lovesFilter"という単語は小文字である必要がありますか?不明なプロバイダ:LovesFilterProvider < - LovesFilter

Error: [$injector:unpr] Unknown provider: LovesFilterProvider <- LovesFilter <- MsgController 

が、 "LovesFilter"( 'が大好き、LovesFilte)を.filteに一致するようにすべきではない:私は "LovesFilter" を使用している場合、私はエラーが出るのでしょうか? ここのコードです:あなたは.filter('loves', LovesFilter)を言うとき、あなたのコードによると

   <!DOCTYPE html> 
      <html ng-app='MsgApp'> 
      <head> 
       <title>Custom Filters</title> 
       <script src="angular.js"></script> 
       <script> 
       /* 
       custom filter 

       */ 
       (function() { 
        'use strict'; 

        angular.module('MsgApp', []) 
        .controller('MsgController', MsgController) 
        .filter('loves', LovesFilter) 
        .filter('truth', TruthFilter); 

        MsgController.$inject = ['$scope', 'lovesFilter']; 
        function MsgController($scope, lovesFilter) { 
        $scope.stateOfBeing = "hungry"; 

        $scope.sayMessage = function() { 
         var msg = "Dog likes to eat healthy snacks at night!"; 
         return msg; 
        }; 

        $scope.sayLovesMessage = function() { 
         var msg = "Dog likes to eat healthy snacks at night!"; 
         msg = lovesFilter(msg) 
         return msg; 
        }; 

        $scope.feedDog = function() { 
         $scope.stateOfBeing = "fed"; 
        }; 
        } 

        function LovesFilter() { 
        return function (input) { 
         input = input || ""; 
         input = input.replace("likes", "loves"); 
         return input; 
        }; 
        } 

        function TruthFilter() { 
        return function (input, target, replace) { 
         input = input || ""; 
         input = input.replace(target, replace); 
         return input; 
        } 
        } 

       })(); 
       </script> 
      </head> 
      <body> 
       <h1>Custom Filters</h1> 
       <div ng-controller='MsgController'> 
       Original: {{sayMessage()}} <br/> 

       <!-- 
        replaces: 
        original:Dog likes to eat healthy snacks at night! 
        new:Dog loves to eat healthy snacks at night! 
       --> 
       Loves: {{ sayLovesMessage() }} <br/> 

       <!--replace 
        original:Dog likes to eat healthy snacks at night! 
        new:Dog likes to eat cookie snacks at night! 
        --> 
       Truth: {{ sayLovesMessage() | truth: 'healthy' : 'cookie'}} <br/> 

       <!-- 
        original:Dog loves to eat healthy snacks at night! 
        replace:DOG LOVES TO EAT COOKIE SNACKS AT NIGHT! 

       --> 
       BIG TRUTH: {{sayLovesMessage() | truth: 'healthy' : 'cookie' | uppercase}} 
       <div> 
        <button ng-click="feedDog()">Feed Dog</button> 
        <br/> 
        <img ng-src="dog_{{stateOfBeing}}.jpg" /> 
       </div> 
       </div> 
      </body> 
      </html> 
+0

を使用してください。あなたのフィルターの名前は 'loves'で、 'loves'ではありません。そして、エラーがそれを確認します。 –

答えて

-1

、ここに問題のあるフィルタは、実際にlovesという名前です。最初の引数はフィルタの名前であるため、を愛し、2番目のパラメータはフィルタ関数です。この名前はです.LovesFilterです。

MsgController.$inject = ['$scope', 'lovesFilter']; 
        function MsgController($scope, lovesFilter) { 

これまで:

MsgController.$inject = ['$scope', 'loves']; 
        function MsgController($scope, loves) { 

2 -変更この.filter('loves', LovesFilter)この.filter('LovesFilter', LovesFilter)

にここ

は、次の2つのオプション

の1-変更にこれを持っています

+0

たとえば、小文字の名前のフィルタを定義すると、挿入するのはlowercaseFilterです。小文字ではありません。 https://docs.angularjs.org/guide/filter#using-filters-in-controllers-services-and-directivesを参照してください。 –

0

.filter('loves', LovesFilter)のようなフィルタを登録しているときに、フィルタに指定した名前がの場合、が大好きです。コントローラーにこれを注入するときは、lovesFilterで、ではなく、LovesFilterである必要があります。ドキュメントごとに、<filterName>Filterが表示されます。あなたのフィルターの名前はです。が大好きです。大文字で解決したい場合は、.filter('Loves', LovesFilter)

関連する問題