Javascript 点击事件

我有以下职能：

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

};

$scope.addProduct=函数（$event，obj）{
var myEl=angular.element（$event.target）；
myEl.parent（）.html（'Remove from Widget'）；
};
$scope.removeProduct=函数（id）{
console.log（'Remove->'+id）；
};

---

当我点击“addProduct”时，它工作，但当我点击“removeProduct”时，它不工作。看起来它听不到我添加的新按钮的点击。如何解决此问题？

要使

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

.controller（'someCtrl'，函数（$compile，$scope）{
...
$scope.addProduct=函数（$event，obj）{
var myEl=angular.element（$event.target）；
var myBtn=$compile（'Remove from Widget'）（$scope）；
myEl.after（myBtn）；
};
$scope.removeProduct=函数（id）{
console.log（'Remove->'+id）；
};
});

---

更新：

这是非常正确的-有时你想解决问题，但你一开始并不认为问题是错的

因此，操纵DOM当然应该是一个指令的责任，所以我创建了一个指令来做您想做的事情（根据您的问题）：

应用指令（'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);
            };
        }
    };
});

返回{
限制：“A”，
作用域：{item:'='}，
模板：“{item.description}}”，
控制器：功能（$scope）{
$scope.addProduct=函数（evt）{
var myEl=角度元素（evt.target）；
var myBtn=$compile（btnTmpl）（$scope）；
myEl.after（myBtn）；
};
$scope.removeProduct=函数（id）{
console.log（'Remove->'+id）；
};
}
};
});

---

---

另请参见此

如果以角度进行操作，则不应存在问题

对于每个产品，请尝试在$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>

添加到小部件
从小部件中删除

---

希望这能为你澄清一点

如果要在添加产品后添加移除按钮，应在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>

---

以jquery方式添加html不会使角度绑定起作用。您必须重新思考整个代码，并使用指令/模板对其进行更友好的编码。请提供一个JSFIDLE来帮助你更多。我认为你完全正确！我将为此创建一个指令，这是最好的解决方案。谢谢你，伙计。顺便说一下，我认为angularjs.org主页上的todo教程真的会帮你：p：也许你甚至不需要指令。将两个按钮都放在模板中，并播放它们的可见性（

ng show

或

ng if

）。添加一个布尔变量，如

$scope.viewState.productAdded

，以控制哪个按钮可见。这解决了问题，但这就像是有史以来最糟糕的角度代码。推广丑陋的速效药对社区没有好处。@KosProv：我对社区的借口：）我更新了我的答案。Thx提醒一下-我希望对社区造成的损害不是永久性的：PFear不是我的朋友。社区的保护者在这里（那就是我，耶：P）。现在，严肃地说：“我来自jQuery，做这件事很自然，为什么它不起作用？”这类错误正在增加。我甚至看到一个已完成的项目，其中所有控制器都像

$scope.$on（'$viewContentLoaded'，function（）{/*jQuery DOM manipulation here*/}）

。就我个人而言，我更愿意评论这是一个糟糕的设计，而不是试图修复它。我删除了我的反对票，如果我有点苛刻的话，我道歉。我完全明白你的意思：）有时我专注于解决我看不到实际问题的“问题”（尽管回顾过去，我为让一些明显不成角度的东西溜走而感到难过）。谢谢你照顾我们：P

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