未捕获错误:未知提供者:来自myapp的$ filterProvider

时间:2017-09-03 02:21:46

标签: angularjs angularjs-directive angular-filters

我收到以下错误:

  使用以下代码时,

(未捕获错误:来自myapp的未知提供程序:$ filterProvider)。请帮忙解决。

     

未捕获错误:来自myapp的未知提供商:$ filterProvider          在angular.min.js:29

HTML ---------------------

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js">`</script>
    <div ng-app="myapp" ng-controller="WeatherCtrl">
        <h2>Weather in Salzburg, Austria</h2>
        <weather-icon cloudiness="{{ weather.clouds }}"></weather-icon>
        <h3>Current: {{ weather.temp.current | temp:2 }}</h3>
        min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }}
    </div>

源代码(.js)-------------------

    'use strict';

var myapp = angular.module('myapp', []);

myapp.factory('weatherService', function($http) {
    return { 
      getWeather: function() {
        var weather = { temp: {}, clouds: null };
        $http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=Salzburg,at&units=metric&callback=JSON_CALLBACK&APPID=f9dbd911bc01df1d9ce563b2ba4d3209').success(function(data) {
            if (data) {
                if (data.main) {
                    weather.temp.current = data.main.temp;
                    weather.temp.min = data.main.temp_min;
                    weather.temp.max = data.main.temp_max;
                }
                weather.clouds = data.clouds ? data.clouds.all : undefined;
            }
        });

        return weather;
      }
    }; 
});

myapp.filter('temp', function($filter) {
    return function(input, precision) {
        if (!precision) {
            precision = 1;
        }
        var numberFilter = $filter('number');
        return numberFilter(input, precision) + '\u00B0C';
    };
});

    myapp.controller('WeatherCtrl', function ($scope, weatherService) {
        $scope.weather = weatherService.getWeather();
    });

    myapp.directive('weatherIcon', function() {
        return {
            restrict: 'E', replace: true,
            scope: {
                cloudiness: '@'
            },
            controller: funct

ion($scope) {
                $scope.imgurl = function() {
                    var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/';
                    if ($scope.cloudiness < 20) {
                        return baseUrl + 'sunny.png';
                    } else if ($scope.cloudiness < 90) {
                       return baseUrl + 'partly_cloudy.png';
                    } else {
                        return baseUrl + 'cloudy.png';
                    }
                };
            },
            template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>'
        };
    });

1 个答案:

答案 0 :(得分:-1)

我认为您不能将过滤器定义注入过滤器定义,就像您在此处所做的那样:myapp.filter('temp', function($filter)

编辑:看来我错了,你应该可以注入$ filter。