ng-click不调用该函数

Question

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