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>

控制器：

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标签，因此未定义控制器。

Answer 1

检查工作演示：JSFidde

您正在使用<div ng-controller="BonusCtrl as bonusManager">，因此请将其命名为：

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

在控制器中，定义this.add = function() {...而不是$scope.add = function() {...。因为关键字as会在后面调用new BonusCtrl()。

Answer 2

我得到了你的代码并用两个案例做了一个运行的例子。

首先使用 BonusCtrl

$ scope.add = function（）{...}

ng-click="add()"

其次是 bonusManager

this.add = function（）{...}

ng-click="bonusManager.add()"

对我来说它应该运作得很好。如果您有任何其他问题，请与我们联系。

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是你可以随时使用

Answer 3

如果您使用的是BonusCtrl as bonusManager，请执行以下操作

在视图中更新bonusManager.add()，在控制器中写this.add而不是$scope.add()。

否则只需从bonusManager语法中删除ng -controller。它就可以正常工作。

Answer 4

如果您使用$ scope而不需要构建ControllerAs，请使用

<div ng-controller="BonusCtrl">

并提交功能ng-submit =＆＃34; add（）＆＃34;

或者如果你想使用ControllerAs，而不是使用＆＃34;这个＆＃34;：

<div ng-controller="BonusCtrl as bonusManager">
ng-submit="BonusCtrl.add()"

但是你的控制器必须是＆＃34;这个＆＃34;而不是$ scope： `

this.add = function（）{

`

试试吧。

ng-click不起作用

编辑1

编辑2

4 个答案: