Multiple directives [myPopup, myDraggable] asking for new/isolated scope
From docs:
Example scenarios of multiple incompatible directives applied to thesame element include:
Multiple directives requesting isolated scope.
Multiple directives publishing a controller under the same name.
Multiple directives declared with the transclusion option.
Multiple directives attempting to define a template or templateURL.
Try removing isolate scope on myDraggable
's directive:
app.directive('myDraggable', ['$document', function ($document) { return { restrict: 'A', replace: false, scope: { enabled: '=myDraggable' }, //remove this line
Replace scope.enabled
with attrs.enabled
:
if (attrs.enabled == "true") {
And modify your template to bind the enable attribute:
<div my-draggable="draggable" enabled="{{draggable}}"
A DOM element is creating a collision with your attempted isolate scopes. Therefore, you should always ask yourself if an isolate scope is needed.
Consider removing the isolate scope on myDraggable
, interpolating the myDraggable value (like you did with isDraggable), and accessing the attribute in the link
function.
<div class="draggable" my-draggable="{{isDraggable}}">I am draggable {{isDraggable}}</div>
...replace: false,link: function (scope, elm, attrs) { var startX, startY, initialMouseX, initialMouseY, enabled = attrs.myDraggable === 'true'; if (enabled === true) {...
See your updated Plunker here and notice the change in the myPopup template.
If you want to see the myDraggable attribute changes then implement something like:
attrs.$observe('myDraggable', function(iVal) { enabled = iVal === 'true'; // AND/OR if (iVal === 'true') doSomething();});
See Angular Attribute Docs $observe function
my error was similar:
Error: [$compile:multidir] Multiple directives [groups, groups] asking for new/isolated scope on:
In my case I had duplicate declaration of
.component('groups', new GroupsComponent());
in app.js/app.ts file
and at the same time on the component itself
const groups = angular.module('groups', ['toaster']).component('groups', new GroupsComponent());
Removing it from app.js/app.ts fixed the issue.