javascript - 为什么我的 ng-click 不起作用

Question

我不确定为什么 ng-click 没有使用该功能。我尝试将“Next”函数分配给作用域变量，但它仍然不起作用。

这是 HTML(不包括元素中的“App”位)

<div ng-controller="CarouselCtrl">
    <div>
        <img src="" class="carousel-arrow" ng-click="Next();">
        <h1>{{Index}}</h1>
    </div>
</div>

这是 JavaScript

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

App.controller('CarouselCtrl', ['$scope', function($scope) {

    var Carousel = {};

    Carousel.Data = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5']
    Carousel.Index = 0;

    Carousel.Next = function() {

        if (Carousel.Index >= Carousel.Data.length) {
            Carousel.Index = 0;

        } else {
            Carousel.Index++
        }
    }

        $scope.Index = Carousel.Data[Carousel.Index];
        $scope.Next = function(){
        Carousel.Next();
        console.log('clicked');
    }
}]);

Answer 1

$scope.Next = Carousel.Next();

更改为

$scope.Next = Carousel.Next;

通过执行 $scope.Next = Carousel.Next();，作用域 Next 不再是一个函数，而只是由 Carousel.Next 返回的值() 函数。因此，您所要做的就是像上面一样分配函数定义。

更新

$scope.Next = function(){
        Carousel.Next();
        $scope.Index = Carousel.Data[Carousel.Index];
        console.log('clicked');
}