[英]Angular ng-click event
I have these functions: 我有这些功能:
$scope.addProduct = function($event, obj) {
var myEl = angular.element($event.target);
myEl.parent().html('<button class="btn btn-danger btn-xs" ng-click="removeProduct('+ obj.id +')">Remove from Widget</button>');
};
$scope.removeProduct = function(id) {
console.log('Remove ->' + id);
};
When I click on "addProduct" it work but when I click on "removeProduct" does not work. 当我单击“ addProduct”时,它起作用,但是当我单击“ removeProduct”时,则不起作用。 Looks like it doesn't listen the click on the new button that I added.
看起来它没有听我添加的新按钮的单击。 How can I solve it?
我该如何解决?
In order for ngClick
to take effect, you need to first compile your HTML and link it to the $scope
: 为了使
ngClick
生效,您需要首先编译HTML并将其链接到$scope
:
.controller('someCtrl', function ($compile, $scope) {
...
$scope.addProduct = function($event, obj) {
var myEl = angular.element($event.target);
var myBtn = $compile('<button class="btn btn-danger btn-xs" ng-click="removeProduct('+ obj.id +')">Remove from Widget</button>')($scope);
myEl.after(myBtn);
};
$scope.removeProduct = function(id) {
console.log('Remove ->' + id);
};
});
UPDATE: 更新:
Kos Prov's comment is very true - sometimes you think about solving the problem, but you don't think the question was wrong in the first place. Kos Prov的评论非常正确-有时您会考虑解决问题,但您并不认为问题首先是错误的。
So, of course manipulating the DOM should be a directive's responsibility, so I created a directive to do what you want (according to your question): 因此,当然,操作DOM应该是指令的责任,因此我创建了一条指令来执行您想要的操作(根据您的问题):
app.directive('removableProduct', function ($compile) { var btnTmpl = '' + 'Remove from Widget' + ''; app.directive('removableProduct',函数($ compile){var btnTmpl =''+'从小部件中删除'+'';
return {
restrict: 'A',
scope: {item: '='},
template: '<div ng-click="addProduct($event)">{{item.description}}</div>',
controller: function ($scope) {
$scope.addProduct = function (evt) {
var myEl = angular.element(evt.target);
var myBtn = $compile(btnTmpl)($scope);
myEl.after(myBtn);
};
$scope.removeProduct = function(id) {
console.log('Remove -> ' + id);
};
}
};
});
See, also, this short demo . 另请参见此简短演示 。
You have a problem which should not exist if you do it in Angular way. 如果您以Angular方式进行操作,则该问题将不存在。
For every product try to hold a boolean value like 'productAdded' in your $scope model. 对于每种产品,请尝试在$ scope模型中保留一个布尔值,例如“ productAdded”。
Then you can do in example: 然后,您可以在示例中执行以下操作:
<div ng-repeat="product in products">
<button ng-show="product.productAdded" class="btn btn-danger btn-xs" ng-click="addProduct(product)">Add to Widget</button>
<button ng-show="!product.productAdded" class="btn btn-danger btn-xs" ng-click="removeProduct(product.id)">Remove from Widget</button>
</div>
Hope this clarifies a bit for you! 希望这对您有所帮助!
If you want to add a remove button after a product is added, you should add the remove button within the ng-repeat itself: 如果要在添加产品后添加删除按钮,则应在ng-repeat本身内添加删除按钮:
JS JS
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="product in products">
{{product.name }}<button ng-click="deleteProduct(product)">Delete</button>
</li>
</ul>
</div>
Controller 调节器
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.products = [{ name:'pencil' }, { name: 'crayon' }, { name: 'pen' }];
$scope.deleteProduct = function(product) {
var index = $scope.products.indexOf(product);
if (index >=0) {
// remove the product
$scope.products.splice(index, 1);
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.