Multiple directives [directive#1, directive#2] asking for isolated scope on

Question

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.

Answer 1

You need to change your easydialog template and wrap <easymodal> in a <div>.