CODEWITHSUNDEEP
angularjstwitter-bootstrap
Sinetheta
Sinetheta

Reputation: 9449

Angular error in Firefox only "Multiple directives asking for isolated scope"

I've created a jsBin to illustrate the issue.

When using tooltip from the Angular UI on an element which is also using directive that asks for an isolated scope, eg:

.directive('smile', function() {
  return {
    scope: {},
    template: ':)'
  };
});

I get the following error in Firefox but not in Chrome:

Error: Multiple directives [smile, tooltip] asking for isolated scope on: <a class="ng-isolate-scope ng-scope" href="#" tooltip="Tooltip" tooltip-placement="bottom" smile="">

Which is odd because I wouldn't expect a tooltip to ask for an isolated scope. It's my understanding this line in the source says that the directive does not ask for an isolated scope, and that only the popup which gets injected at the bottom of the page does.

What am I missing here? Why is this error only showing up in Firefox?

Upvotes: 2

Views: 2379

Answers (1)

icanbeacoder
icanbeacoder

Reputation: 1388

The Line of Code you mentioned says

restrict: 'EA',

    scope: true,

    link: function link ( scope, element, attrs ) {
      var tooltip = $compile( template )( scope );
      var transitionTimeout;
      var popupTimeout;

.....

Setting scope true also creates a new scope, which prototypically inherits from the scope of the parent. [Google group]

So here when you do

scope : {},

Also create a new scope, but isolated. So two scope for the same

< a >

And you can have only one scope per element.

For Firefox issue refer : Isolated scope unicity assertion on same element works on Chrome, fails on Firefox https://github.com/angular/angular.js/issues/3208

Upvotes: 5

Related Questions