Multiple directives [directive#1, directive#2] asking for isolated scope on
22,375
You need to change your easydialog
template and wrap <easymodal>
in a <div>
.
Related videos on Youtube
Author by
Rohan
Updated on November 27, 2020Comments
-
Rohan over 3 years
I'm attempting to build a new directive on top of an already existing directive but I am halted in my proces. When loading the page I'm facing the following error:
Multiple directives [directive#1, directive#2] asking for isolated scope on
<easymodal title="Test-Title" text="Text-Text" oncancel="show = false" onok="alert();">
The base directive looks like this:
Rohan.directive('easymodal', function () { return { restrict: 'E', // priority: 200, transclude: true, replace: true, scope:{ showModal: "=show", callback: "=closeFunction", dismissable: '&' }, template: '<div data-ng-show="showModal" class="modal-container">' + '<div class="modal-body">' + '<div class="title"><span data-translate></span><a data-ng-show="dismissable" data-ng-click="dismiss()">x</a></div>' + '<div data-ng-transclude></div>' + '</div>' + '<div class="modal-backdrop" data-ng-click="dismiss()"></div>' + '</div>' }; });
And my wrapper directive looks like this:
Rohan.directive('easydialog', function () { return { restrict: 'E', transclude: true, scope: {title: '@', text: '@', onOk: '&', onCancel: '&'}, replace: true, template: '<easymodal>' + '{{text}} ' + '<hr>' + '<button ng-click="{{onCancel}}" value="Cancel"' + '<button ng-click="{{onOk}}" value="Ok"' + '</easymodal>' }; });
My html looks like this:
<easydialog title="Test-Title" text="Text-Text" onCancel="show = false" onOk="alert();" />
At first I though my title attribute was conflicting so I removed that attribute in the html line and from my wrapper directive but it was not effective.
-
Ajay Beniwal about 11 yearscould you please set up fiddle
-
-
Rohan about 11 yearsThanks, I would've never guessed that.
-
masimplo over 10 yearsCould you elaborate on that? What is the problem in the first place and how is wrapping them in a div fixes it?
-
Langdon over 10 years@mxa055 I believe Angular associates HTML elements to a scopes, and cannot associate a single HTML element to more than 1 scope.