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
– Maxim Shoustin, Commented May 14, 2017 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
– Soham Bhaumik, Commented May 14, 2017 at 12:46
do you enter with breaking point to line if ($(this).children().length ==0 )? — Maxim Shoustin
– Maxim Shoustin, Commented May 14, 2017 at 13:12

Community · Accepted Answer · 2017-05-23 11:47:18Z

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, 2017 at 11:47

CommunityBot

11 silver badge

answered May 14, 2017 at 13:16

mastermind

1,0551 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Directive Event Listener Not firing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related