Javascript 角控制器喷油器错误

我试图创建我的第一个滑块与角度。我收到的错误是$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

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>

当我点击错误链接时：

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;
    });
}]);

部分：

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

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>

使用ngAnimate创建滑块

---

您不必注入

$watch

，它是注入的

$scope

的一个属性

只需省略控制器声明的这一部分，如下所示：

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

---

（之所以出现此错误，是因为angular正在查找名为

$watch

的可注入对象，因为您将其指定为控制器函数的参数。根据经验，如果要使用

对象.property

语法，则注入所需的是

对象

，而不是

属性

--在这种情况下，

$scope

用于

$scope.$watch

）

谢谢！这修复了我的错误。我不知道

$watch

是

$scope

的属性。我认为它是自己的对象。学习角度是有趣的：）