角ng-click事件

Question

我有這些功能：

$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);

};

當我單擊“ addProduct”時，它起作用，但是當我單擊“ removeProduct”時，則不起作用。 看起來它沒有聽我添加的新按鈕的單擊。 我該如何解決？

Answer 1

為了使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);
    };
});

---

更新：

Kos Prov的評論非常正確-有時您會考慮解決問題，但您並不認為問題首先是錯誤的。

因此，當然，操作DOM應該是指令的責任，因此我創建了一條指令來執行您想要的操作（根據您的問題）：

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);
            };
        }
    };
});

---

另請參見此簡短演示 。

Answer 2

如果您以Angular方式進行操作，則該問題將不存在。

對於每種產品，請嘗試在$ scope模型中保留一個布爾值，例如“ productAdded”。

然后，您可以在示例中執行以下操作：

<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>

希望這對您有所幫助！

Answer 3

如果要在添加產品后添加刪除按鈕，則應在ng-repeat本身內添加刪除按鈕：

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>

調節器

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);
        }
    }
});