title: angularjs - Multiple directives asking for new / isolated scope
body: <p>I have a directive to call a function only after iframe is loaded. However I get multidirective new / isolated scope error. My code snippet is as below.</p>
  
  <pre class="lang-jsp prettyprint-override"><code>&lt;iframe ng-src="{{src}}" ng-if="loginCheck" ng-show="false" data-iframe-on-load="iframeOnLoad" data-iframe-callback="testLoad()"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre class="lang-js prettyprint-override"><code>directive('iframeOnLoad', function () {
      return {
          restrict: 'A',
          scope: {
              callback: '&amp;iframeCallBack'
          },
          link: function (scope, element, attrs) {
              element.on('load', function() {
                  return scope.callback();
              });
          }
      };
  })
  </code></pre>
  
  <p>controller:</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.loginCheck = true;
  $scope.testLoad= function () {
      alert('loaded...');
  };
  </code></pre>
  
  <p>Error:</p>
  
  <blockquote>
    <p>Error: [$compile:multidir] Multiple directives [iframeOnLoad, iframeOnLoad] asking for new/isolated scope on 
  </blockquote>