Angularjs - Multiple directives requesting a new / selected area
I have a directive to call a function only after the iframe has loaded. However, I am getting a multi-mode new / isolated scope error. My code snippet looks like this.
<iframe ng-src="{{src}}" ng-if="loginCheck" ng-show="false" data-iframe-on-load="iframeOnLoad" data-iframe-callback="testLoad()"></iframe>
JS:
directive('iframeOnLoad', function () {
return {
restrict: 'A',
scope: {
callback: '&iframeCallBack'
},
link: function (scope, element, attrs) {
element.on('load', function() {
return scope.callback();
});
}
};
})
controller:
$scope.loginCheck = true;
$scope.testLoad= function () {
alert('loaded...');
};
Mistake:
Error: [$ compile: multidir] Multiple [iframeOnLoad, iframeOnLoad] directives requesting new / allocated scope
source to share
No problem with the code you posted other than there &iframeCallBack
should be &iframeCallBack
. Otherwise, consider changing data-iframe-callback="testLoad()"
to data-iframe-call-back="testLoad()"
.
A possible cause of the problem is that you have several directives that you create by copying the existing directive code and forgetting to change the name of the directive to a new one. Just search your code for iframeOnLoad
, I'm sure you will find two directives with that name.
This is because AngularJS allows you to register multiple directives with the same name. This template can be used to extend existing directive functionality. However, you can only create one isolated region per DOM element, so two directives with the same name that require an isolated region contradict each other.
See here for a working example .
The same question as yours reproduced here .
source to share