ng-click не вызывает функцию

Я изучаю 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>


angularjs angular-directive
person zilcuanu    schedule 01.09.2015    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Функция запускается, но внутри нее есть синтаксическая ошибка:

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

or

Обычно люди используют следующий способ, когда им приходится иметь дело со списком разработчиков, и функция должна быть внутри 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

person Deblaton Jean-Philippe    schedule 01.09.2015
comment
Спасибо. Простая ошибка и более часа отладки. - person zilcuanu; 01.09.2015

arrow_upward
2
arrow_downward

если вы включите консоль в своем плункере, вы увидите ошибку:

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

person Ignat Galkin    schedule 01.09.2015

arrow_upward
1
arrow_downward

При нажатии на кнопку вы передаете 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..");
}
person jpstevens    schedule 01.09.2015