angularjs - ng-click 不调用函数

Question

我正在学习 AngularJs 并尝试运行自定义指令。我有一个按钮，单击该按钮后，我需要处理 Controller 内的事件。我没有得到 ng-click 指令的函数调用。我附上了 plnkr 链接: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