javascript - ng-click 不起作用

Question

我正在编写一个单页 Web 应用程序，主要使用 AngularJS 框架，并且在使用 ng-click 指令时遇到问题。

该指令实际上在单击时不执行任何操作。未调用链接的方法(我无法调试它)。

下面有问题的代码:

模板文件:

<div ng-controller="BonusCtrl as bonusManager">

<!-- [...] --> 
<button style="margin-top: 5px" 
class="btn btn-success" ng-click="add()"><i class="fa fa-plus"/> Règle de calcul</button>

<!-- [...] -->

</div>

Controller :

idServerApp.controller('BonusCtrl', ['$scope', 'webService', 'math', 'DATERANGE_OPTIONS', function ($scope, webService, math, DATERANGE_OPTIONS) {

$scope.add = function() {
    console.log('foo'); // no call
    var newItem = {
        brandId: undefined,
        days: 0,
        priceMinEVAT: 0,
        bonus: 0
    };
    $scope.rules.push(newItem);
};

你知道这个问题吗？

---

编辑 1

我尝试用add()和BonusCtrl.add()替换bonusManager.add()。 然后我尝试用它替换 $scope，或者删除controllerAs。

Complete JSFiddle (using some of my services)

编辑2

感谢您的回答。我自己找到了解决方案，而且很糟糕。 我忘记了 HTML 模板中的结束 div 标签，因此未定义 Controller 。

Answer 1

我得到了你的代码并制作了一个包含两个案例的运行示例。

第一个使用BonusCtrl

$scope.add = function () {...}

ng-click="add()"

第二个是bonusManager

this.add = function () {...}

ng-click="bonusManager.add()"

对我来说，它应该工作得很好。如果您有任何其他问题，请告诉我。

var app = angular.module('myapp',[]);
app.controller('BonusCtrl', ['$scope', function ($scope) {
    

$scope.add = function() {
    console.log('Hey you\'ve just invoked add() function!'); // no call
    var newItem = {
        brandId: undefined,
        days: 0,
        priceMinEVAT: 0,
        bonus: 0
    };
  };

  this.add = function () {
    console.log('You can invoke function using \' bonusManager.add()'); // no call
  };

}
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <h1>NG-CLICK EXAMPLE</h1>
    <div ng-controller="BonusCtrl as bonusManager">
    
    <button style="margin-top: 5px" 
    class="btn btn-success" ng-click="add()"><i class="fa fa-plus"/>add()</button>

  <button style="margin-top: 5px" 
    class="btn btn-success" ng-click="bonusManager.add()"><i class="fa fa-plus"/> bounsManager.add()</button>
    </div>
</div>

但是您始终可以使用您的