javascript - AngularJS 指令事件监听器未触发

Question

我有一个像这样的指令:

<div ng-repeat="(key, value) in $parent.item.detailedPlan track by $index">
  <ul contenteditable="true" class="plan-actions" data-placeholder="Add Plan ...">
    <li ng-repeat="planItem in value" ng-show="(key+1)==$parent.dayItem.value">
      {{planItem}}
    </li>
  </ul>
</div>

和一个像这样的指令函数:

.directive('planText', function(){
      return {
        restrict:'E',
        templateUrl: 'app/partials/planText.html',
        link: function(scope, element, attrs){

          element.find("ul").bind('keydown', function(event){
            console.log("keydown event");
          if (event.keyCode == 8) {
            // console.log("backspace pressed");
            if ($(this).children().length == 1 && $(this).children("li").text().split("").length == 0) {
                console.log("stop li removal");
                event.preventDefault();
            }
          }
        });
        element.find("ul").bind('focus', function(event){
            if ($(this).children().length ==0 ) {
                console.log("insert li");
                $(this).append("<li></li>");
            }
        });
        }
      }
})

它读取的数据结构是一个数组的数组。但是，这两个事件监听器函数都不会触发。添加 $compile 也没有帮助。请帮忙!

Answer 1

检查这个codePen

问题是当你在指令中使用 ng-repeat 时，它会发生，因为创建元素时链接被触发，但 ng-repeats 之后开始工作，所以你可以通过添加 $timeout 来解决这个问题 绑定(bind)之前。

此问题与 AngularJS directive runs before element is fully loaded 重复