ng-click 不调用函数

Question

我正在学习 AngularJs 并正在尝试运行自定义指令。我有一个按钮，单击该按钮后，我需要处理控制器内的事件。我没有收到 ng-click 指令上的函数调用。我附上 plnkr link: Link to plnkr

// Code goes here
angular.module("app", []);

angular.module('app').controller('mainCtrl', function($scope){
  
  $scope.developer={
    name: "Pradeep Kumar L",
    age: 32,
    city: "Bengaluru",
    friends:[
      "Praveen",
      "Kori",
      "Kiran"
      ]
  }
 
 $scope.handleClick = function(){
   developer.rank="friend";
    console.log("button clicked..");
  }

});

angular.module('app').directive('mySimpleDirective', function(){
  return{
    restrict: "E",
    templateUrl: 'userInfoCard.html'
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="panel panel-primary">
  <div class="panel-heading">
  <h4>{{developer.name}}</h4>
  </div>
  <div class="panel-body">
    <span ng-show='!!developer.age'><h4>User age:  {{developer.age}}</h4></span>
    <h4>User city: {{developer.city}}</h4>
    <h4>Friends</h4>
    <ul>
      <li ng-repeat="friend in developer.friends">
        {{friend}}
        
      </li>
    </ul>
    <div ng-show="!developer.rank">
      Rank: {{developer.rank}}
    </div>
    <div ng-show="!developer.rank">
      <button class="btn btn-success"  ng-click="handleClick(developer)">Click Me</button>    
    </div>
  </div>
</div>

Answer 1

函数已触发，但其中存在语法错误：

 $scope.handleClick = function(){
    $scope.developer.rank="friend";
    console.log("button clicked..");
 };

或

通常，人们在必须处理开发人员列表时使用以下方式，并且该函数将在 ng-repeat 中。

 $scope.handleClick = function(developer){ //as far as you pass it as argument
    developer.rank="friend";
    console.log("button clicked..");
 };

http://plnkr.co/edit/vsRr9CfXxK0HQ7XS5GFe?p=preview

Answer 2

如果您在 plunker 中打开控制台，您将看到一个错误：

ReferenceError: developer is not defined
at Scope.$scope.handleClick (script.js:18)
at $parseFunctionCall (angular.js:12456)
at callback (angular.js:21692)
at Scope.$eval (angular.js:14555)
at Scope.$apply (angular.js:14654)
at HTMLButtonElement.<anonymous> (angular.js:21697)
at HTMLButtonElement.n.event.dispatch (jquery-2.1.4.min.js:3)
at HTMLButtonElement.r.handle (jquery-2.1.4.min.js:3)

你应该在函数或 $scope 上添加或参数到行 script.js:18

Answer 3

单击按钮时，您将 developer 传递给 handleClick 函数：

<button class="btn btn-success"  ng-click="handleClick(developer)">Click Me</button>

但是，在您的 javascript 中，您的 handleClick 函数没有 developer 作为参数：

$scope.handleClick = function () { // developer is not passed in...
  developer.rank="friend"; // ...so it will be undefined here
  console.log("button clicked..");
}

要解决此问题，您的函数应该是：

$scope.handleClick = function (developer) { // developer can be passed in...
  developer.rank="friend"; // ...so this WILL work!!
  console.log("button clicked..");
}

ng-click 不调用函数

ng-click not calling the function

angularjs

angular-directive