Question

我有一个为用户显示卡片的指令。每张卡都有一张＆＃39; aww＆＃39;或者＆＃39; naww＆＃39;按钮。 AngularJS经历ng-repeat并生成每张卡片。当用户点击该按钮时，我想要＆＃39; aww＆＃39;或者＆＃39; naww＆＃39;该特定卡的增量值。不幸的是，当我现在点击按钮时，没有任何反应，值仍然为零。如何为每张卡增加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

这种情况正在发生，因为＆＃39; $ scope.add＆＃39;控制器的功能不在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'
  };
});

正如您所看到的，我添加了另一个属性来绑定＆＃39;添加＆＃39;在控制器中对指令起作用，从而使其在指令范围内可用。 &用于实现此目标。

Answer 2

问题是你在ng-click函数中传递aww的字面值，在那里你应该传递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>

ng-click不在ng-repeat内部工作

2 个答案: