AngularJS Directive Event Listener Not firing

Question

I have a directive like so:

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

and a directive function like so:

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

the data structure it reads from, is an array of arrays. However neither of the event listener functions fires . Adding a $compile does not help either. Please help !

Can you please post demo? fiddle/plunkr. Did you check that `element.find("ul")` returns something? — Maxim Shoustin, May 14 '17 at 12:27
bit difficult to add the fiddle. but in the link phase, it does find the ul. but the handlers dont fire — Soham Bhaumik, May 14 '17 at 12:46
do you enter with breaking point to line `if ($(this).children().length ==0 )`? — Maxim Shoustin, May 14 '17 at 13:12

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

Check this codePen

The problem is when u use ng-repeat in directive its happened because link fired when element created but ng-repeats start working after that so u can solve this issue by adding $timeout before binding.

this question is duplicate of AngularJS directive runs before element is fully loaded

edited May 23 '17 at 11:47

Community

1
1

answered May 14 '17 at 13:16

mastermind

1,057
1
8
15

AngularJS Directive Event Listener Not firing

1 Answers1