創建DOM元素並在AngularJS指令中設置click事件

Question

如何在AngularJS指令中創建一些DOM元素並在其上設置click事件 ？ 在我的指令中，我以這種方式創建元素：

var list = document.createElement("div");
list.classList.add('myList');
for(var i = 0; i < n; i++) {
    var item = document.createElement("div");
        item.classList.add('myItem');
        list.appendChild(item);
}

所以我有一個外部的div容器，其中包含一些div元素 。 這是我生成的HTML：

<div class="myList">
    <div class="myItem">
    <div class="myItem"></div>
    <div class="myItem"></div>
    <div class="myItem">
</div>

在同一指令中，我必須在這些元素上設置click事件 ，在jQuery中我可以這樣做：

$(".myItem" ).on( "click", function() {
    // Do something
});

我嘗試通過多種方式在Angular中做到這一點，但在設置on click事件時遇到了問題：

var list = document.querySelector('.myList');
_.forEach(list.children, function(value, index){
        var item = document.querySelector(value);
        item.bind("click",function(){
        // Do something
    });
});

我收到一個錯誤：

Failed to execute 'querySelector' on 'Document': '[object HTMLDivElement]' is not a valid selector.

另外，如果我想直接獲取所有myItem（不帶list.children ），請使用：

var item = document.querySelector('.myItem');

我得到：

item.bind is not a function (caused by "undefined")

我可以在指令中設置ng-click ...如何？

item.on( "click", function() {
     // Do something
});

如果我使用.on（）方法，則它像.bind（）一樣是不確定的。

有人可以幫助我嗎？ 感謝您的建議:)

Answer 1

我相信你需要的是

<div class="myList">
<div class="myItem" ng-click="yourClickFn()">
<div class="myItem" ng-click="yourClickFn()"></div>
<div class="myItem" ng-click="yourClickFn()"></div>
<div class="myItem" ng-click="yourClickFn()">

然后在您的Angular控制器中：

$scope.yourClickFn = function(){

  //the code you want to execute here

}

Answer 2

您是否真的有理由以這種方式創建元素？ 這實際上不是做事的方式。 您應該使用ng-repeat來創建html。

同樣，如果您有機會更新到anguar 1.5+，則可以使用組件代替指令，這將使您的生活更輕松。

更新資料

或者，您可以在實際創建元素之后使用jQuery進行操作。 我認為比普通的js版本更容易閱讀。

在他們身上放一堂課，然后做類似的事情：

$('.myClass').on('click', function() {
       //your code
       if (!$scope.$$phase) { // this checks whether you are already in a digest cycle or not - you probably won't be at this phase.
          $scope.$apply(); // this will update the html if you did something to the model above this if
        }
   });

如果您有指令，請將此代碼放入鏈接函數，如果您有組件，則將其放入$ postLink生命周期掛鈎（我認為在1.5.3之后可以使用），因為這些函數是在生成html之后調用的。 通常這些是“凌亂”或“非角度”代碼的地方^ _ ^