CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-scope
Paul Taylor
Paul Taylor

Reputation: 5751

Angular event clash

I have an angularjs application that uses a directive with isolated scope. An unwanted side-effect of this directive is that event handlers wired to the same element no longer fire. This Plunkr illustrates:

http://embed.plnkr.co/aG3X8uCGxQmnM1dJaQmJ/preview

In app.js, if you comment out the following line, mouseenter, mouseleave and dblclick event handlers will start to fire on relevant user actions:

scope: { data: '=source' },

Can anyone explain this effect, please? Is it a bug, or by design? How can make event handlers on the controller fire in the way I want.

Upvotes: 0

Views: 79

Answers (1)

Chandermani
Chandermani

Reputation: 42669

The way you are setting up your directive creates isolated scope, which does not inherit from parent scope and hence the are not visible to directive elements.

One way to fix it would be to move the directive onto a child element like this

<div ng-dblclick="dblclick()" ng-mouseenter="mouseenter()" ng-mouseleave="mouseleave()">
      <span my-directive source="getData()">Some content</span>
    </div>

See this plunker

Upvotes: 1

Related Questions