javascript - Angular Controller 抛出 $injector 错误

Question

我正在尝试使用 Angular 创建我的第一个 slider 。我收到的错误通知我 $watch 可能没有正确注入(inject)。这是错误:

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

Controller :

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>

Answer 1

您不必注入(inject) $watch，它是注入(inject)的 $scope 的一个属性。

只需省略 Controller 声明的那部分，如下所示:

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

(您收到此错误是因为 Angular 正在寻找名称为 $watch 的可注入(inject)对象，因为您将其指定为 Controller 函数的参数。根据经验，如果你想使用 object.property 语法，它是你必须注入(inject)的 object，而不是 property - 在这个案例，$scope 为 $scope.$watch)