ng-click在ng-repeat內部不起作用

Question

我有一個指令，可以為用戶顯示卡片。 每張卡都有一個“ aww”或“ naww”按鈕。 AngularJS經歷ng-repeat並生成每張卡。 當用戶單擊該按鈕時，我希望該特定卡的“ aww”或“ naww”值增加。 不幸的是，當我現在單擊按鈕時，什么也沒有發生，並且值保持為零。 如何獲得每張卡的aww和naww值遞增？

view1.html

<div class="container">
  <div ng-repeat="animal in animals" my-animal="animal"></div>
</div>

view1.js

'use strict';

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope',function($scope) {

$scope.animals = [{'name':'Perry','animal':'Bird','awws':0,'nawws':0, 
                   'image-url': 'https://goo.gl/Vtcvk5'},
                  {'name':'Max','animal':'Cat','awws':0,'nawws':0,
                    'image-url':'https://goo.gl/bqOQci'
                  },
                  {'name': 'Julian','animal':'Duck','awws':0,'nawws':0,
                    'image-url':'https://goo.gl/v9GyTz'
                  }];
$scope.add = function(item){
                    item = item + 1;  
                  };
}])

.directive('myAnimal', function() {
  return {
    scope: {
      item: '=myAnimal'
    },
    restrict: 'EA',
    templateUrl: 'view1/card-template.html'
  };
});

cardtemplate.html

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="add(item.awws)" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

Answer 1

發生這種情況是因為控制器的'$ scope.add'函數不在myAnimal指令（具有隔離范圍）的范圍內。

另外，您以錯誤的方式使用了指令。 my-animal是您的指令，而不是指令的屬性。 首先，將指令調用模板更改為：

<div class="container">
  <div ng-repeat="animal in animals" my-animal animal="animal" add="add"></div>
</div>

指令：

.directive('myAnimal', function() {
  return {
    scope: {
      item: '=animal',
      add: '&' //method binding here
    },
    restrict: 'EA',
    templateUrl: 'view1/card-template.html'
  };
});

如您所見，我添加了另一個屬性，該屬性將控制器中的“ add”功能綁定到指令，從而使其在指令范圍內可用。 &用於實現此目的。

Answer 2

問題是您要在ng-click函數中傳遞item.awws字面值，在此應傳遞item對象並增加其item.awws屬性。

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="add(item)" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="add(item.nawws)" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>

並在js中...

$scope.add = function(item){
                    item.awws += 1;//it might be required to find the item in the collection and then increment it
                  };
}])

或者，最簡單的方法是直接在HTML中執行

<div class="card">
  <img class="card-img-top img-responsive" ng-src="{{item.image-url}}" alt="Cute animal">
  <div class="card-block">
    <h4 class="card-title">{{item.name}}</h4>
    <p class="card-text">{{item.animal}}</p>
    <button type="button" ng-click="item.awws = item.awws + 1" class="btn btn-success">Aww +1 </button>
    {{item.awws}}
    <button type="button" ng-click="item.nawws = item.nawws - 1" class="btn btn-danger">Naww -1 </button>
    {{item.nawws}}
  </div>
</div>