Angular控制器抛出$injector错误

Angular controller throwing $injector error

本文关键字：injector 错误 控制器 Angular      更新时间：2023-09-26

我尝试用Angular创建我的第一个滑块。我收到的错误是告诉我$watch可能无法正确注入…下面是错误:

Error: [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=%24watchProvider%20%3C-%20%24watch%20%3C-%20sliderCtrl
    at Error (native)
    at http://localhost:9999/bower_components/angular/angular.min.js:6:416
    at http://localhost:9999/bower_components/angular/angular.min.js:40:307
    at Object.d [as get] (http://localhost:9999/bower_components/angular/angular.min.js:38:308)
    at http://localhost:9999/bower_components/angular/angular.min.js:40:381
    at d (http://localhost:9999/bower_components/angular/angular.min.js:38:308)
    at Object.e [as invoke] (http://localhost:9999/bower_components/angular/angular.min.js:39:64)
    at b.$get.Q.instance (http://localhost:9999/bower_components/angular/angular.min.js:80:151)
    at K (http://localhost:9999/bower_components/angular/angular.min.js:61:140)
    at http://localhost:9999/bower_components/angular/angular.min.js:68:475

当我点击错误链接:

Unknown provider: $watchProvider <- $watch <- sliderCtrl

控制器:

myApp.controller('sliderCtrl', ['$scope', '$watch', function($scope, $watch){
    // Create an array of slide images
    $scope.sliderImages = [
        { image: '../../public/assets/img/joker2.jpg', description: 'Image 1' },
        { image: '../../public/assets/img/batman1.jpg', description: 'Image 2' },
        { image: '../../public/assets/img/joker1.jpg', description: 'Image 3' }
    ];
    // Initially the index is at the first image
    $scope.currentIndex = 0;
    //Display next image in array
    $scope.next = function(){
        $scope.currentIndex < $scope.sliderImages.length - 1 ? $scope.currentIndex++ : $scope.currentIndex = 0;
    };
    //Display prev image in array
    $scope.prev = function() {
        $scope.currentIndex > 0 ? $scope.currentIndex-- : $scope.currentIndex = $scope.sliderImages.length - 1;
    };
    $scope.$watch('currentIndex', function() {
        $scope.sliderImages.forEach(function(image) {
            // make every image invisible
            image.visible = false;
        });
        // make the current image visible
        $scope.sliderImages[$scope.currentIndex].visible = true;
    });
}]);

指令: 

myApp.directive('slider', [ '$timeout',
    function($timeout) {
        return {
            scope: {},
            restrict: 'E',
            controller: 'sliderCtrl',
            templateUrl: 'public/views/partials/slider.html'
        }
    }
]);

部分: 

<p class="component-example-header">Creating a slider with ngAnimate</p>
<div class="slider">
    <div class="slide" ng-show="slide.image.visible">
        <img width="500px" height="250px" ng-repeat="slide in sliderImages" ng-src="{{slide.image}}">
    </div>
    <div class="slide-navifation">
        <a href="#" ng-click="prev()"><</a><br>
        <a href="#" ng-click="next()">></a>
    </div>
</div>

您不必注入$watch，这是注入的$scope的属性。

省略控制器声明的那一部分，如下所示:

myApp.controller('sliderCtrl', ['$scope', function($scope){/*...*/

(你得到这个错误，因为角正在寻找一个可注入的名称$watch，因为你指定它作为控制器函数的参数。作为经验法则，如果您想使用object.property语法，则必须使用object进行注入，而不是property—在这种情况下，$scope用于$scope.$watch )

相关文章：