Question

对于以下HTML和JS控制器，为什么＆＃39;清除＆＃39;按钮没有触发功能？

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-app="app" ng-controller="resetController as reset">
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <button ng-click="clearName">Clear</button>
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>
</body>

</html>

app.js文件

angular.module('app', [])
.controller('resetController', function($scope) {
  $scope.yourName = 'Start';

  $scope.clearName = function(){
    console.log('clearing name...');
    $scope.yourName = '';
  };

});

Answer 1

我相信你错过'（）'，我相信你必须把这个函数写成好像被调用一样，例如

<button ng-click="clearName()">Clear</button>

此外，我可以看到您正在使用controllerAS语法，因此通常最终会得到：

<button ng-click="reset.clearName()">Clear</button>

但是，我认为在这种情况下你需要将函数绑定到控制器而不是范围对象。 e.g。

angular.module('app', [])
.controller('resetController', function() {
  var self = this;
  self.yourName = 'Start';

  self.clearName = function(){
    console.log('clearing name...');
    self.yourName = '';
  };

});

这是一篇很长的阅读，但请看https://github.com/johnpapa/angular-styleguide。

祝你好运。

Answer 2

clearName（）是一个函数，因此您需要括号。

<button ng-click="clearName()">Clear</button>

AngularJS - 控制器内的功能不像我在简单示例中所期望的那样被调用

2 个答案: