[英]ng-click not working inside of ng-repeat
I have a directive that displays cards for the user. 我有一个指令,可以为用户显示卡片。 Each card has an 'aww' or 'naww' button. 每张卡都有一个“ aww”或“ naww”按钮。 AngularJS goes through the ng-repeat and generates each card. AngularJS经历ng-repeat并生成每张卡。 When the user clicks that button I want the 'aww' or 'naww' value to increment for that particular card. 当用户单击该按钮时,我希望该特定卡的“ aww”或“ naww”值增加。 Unfortunately, when I click the buttons now, nothing happens and the values remain at zero. 不幸的是,当我现在单击按钮时,什么也没有发生,并且值保持为零。 How would I get the aww and naww values to increment for each individual card? 如何获得每张卡的aww和naww值递增?
view1.html view1.html
<div class="container">
<div ng-repeat="animal in animals" my-animal="animal"></div>
</div>
view1.js 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 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>
This is happening because '$scope.add' function of your controller isn't inside the scope of your myAnimal directive(which has an isolate scope). 发生这种情况是因为控制器的'$ scope.add'函数不在myAnimal指令(具有隔离范围)的范围内。
Also, you are using the directive in a wrong way. 另外,您以错误的方式使用了指令。 my-animal
is your directive and not an attribute for your directive. my-animal
是您的指令,而不是指令的属性。 First, change your directive calling template to: 首先,将指令调用模板更改为:
<div class="container">
<div ng-repeat="animal in animals" my-animal animal="animal" add="add"></div>
</div>
directive to: 指令:
.directive('myAnimal', function() {
return {
scope: {
item: '=animal',
add: '&' //method binding here
},
restrict: 'EA',
templateUrl: 'view1/card-template.html'
};
});
As you can see I have added another attribute which binds the 'add' function in your controller to the directive, thus making it available in the directive scope. 如您所见,我添加了另一个属性,该属性将控制器中的“ add”功能绑定到指令,从而使其在指令范围内可用。 &
is used for achieving this. &
用于实现此目的。
Issue is you are passing literal value of aww in ng-click
function, where as you should pass the item
object and increment its item.awws
property. 问题是您要在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>
and in js... 并在js中...
$scope.add = function(item){
item.awws += 1;//it might be required to find the item in the collection and then increment it
};
}])
Or, the easiest would be to do it directly in HTML 或者,最简单的方法是直接在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.