なぜ "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>
を使用してください。あなたのフィルターの名前は 'loves'で、 'loves'ではありません。そして、エラーがそれを確認します。 –