Question

我试图用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>

Answer 1

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

只是省略控制器声明的那部分，如下：

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

（您正在收到此错误，因为angular正在寻找名称为$watch的注射器，因为您将其指定为控制器功能的参数。根据经验，如果您想要使用object.property语法，它是您需要注入的object，而不是property - 在这种情况下，$scope用于{ {1}} ）

角度控制器抛出$ injector错误

1 个答案: