javascript - ng-click 没有触发与之关联的功能吗?

标签 javascript angularjs angularjs-ng-click angularjs-ng-include

我在使用 ng-click 时遇到问题。我已向按钮添加了 ng-click 指令。它不会触发与 ng-click 相关的功能。在 Angular Batarang 工具中,它说函数未定义。

我在 Plunker 中尝试了这个问题。它确实有效。而且如果我对文件路径进行硬编码,它就可以工作。

index.html代码

<!DOCTYPE html> 
<HTML ng-app="myEventApp">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
            <h1 ng-controller="HelloWorldController">{{ helloMessage }}</h1>
            <div ng-controller="EventDetail">
            </div>
            <div ng-include="" src="fileName"></div>
            <!--<ng-include src="fileName"></ng-include>-->
            <!--<div ng-include="" src="'template/testing10000.html'"></div>-->
            <button ng-click=incrementCounter()>Next</button>
            <button ng-click=decrementCounter()>Back</button>
            <script
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
            <script src="js/app.js"> </script>
    </body>
</HTML>

app.js 代码

var app = angular.module("myEventApp", []);

app.controller('HelloWorldController', ['$scope', function($scope){
        $scope.helloMessage = "Book Viewer";
}]);


app.controller('EventDetail', ['$scope', function($scope){

        $scope.counter = 0;
        $scope.fileName = 'template/testing1000'+$scope.counter+'.html';


        $scope.incrementCounter = function(){
              $scope.counter++;
              $scope.fileName = 'template/testing1000'+$scope.counter+'.html';
              console.log($scope.counter);
        }

        $scope.decrementCounter = function(){
              $scope.counter--;
              $scope.fileName = 'template/testing1000'+$scope.counter+'.html';
              console.log($scope.counter);
        }


}]);

最佳答案

您在 EventDetail Controller 内声明了函数,但在 html 中的 Controller 容器外部有按钮。

<div ng-controller="EventDetail">
    <div ng-include="" src="fileName"></div>

    <button ng-click="incrementCounter()">Next</button>
    <button ng-click="decrementCounter()">Back</button>    
</div>

关于javascript - ng-click 没有触发与之关联的功能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36326457/

相关文章:

javascript - 如何将 HTML 从 Controller append 到指令模板 AngularJS - 错误无法插值

javascript - ng-mousedown 与 ng-click 一起使用的意外行为

javascript - 如何在 webpack.config.js 中包含全日历语言环境

javascript - 将逗号分隔值存储到数组中

javascript - 如何使用基于时间的表达式?

angularjs - $state.go 不是函数

javascript - 有条件的 ng-click

javascript - 虽然在控制台中未定义,但 setInterval 中的 javascript 变量会在警告框上显示其值

javascript - 将 Adob​​e 创意编辑图像上传到我的服务器而不是他们的 Creative Cloud

javascript - json 对象内的对象值未在嵌套 ng-repeat 中求值