angularjs - 多个指令要求新的/隔离的范围

Question

我有一个指令，仅在 iframe 加载后调用函数。但是我收到多指令新/隔离范围错误。我的代码片段如下。

<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...');
};

错误:

Error: [$compile:multidir] Multiple directives [iframeOnLoad, iframeOnLoad] asking for new/isolated scope on

Answer 1

您发布的代码没有问题，除了 &iframeCallBack 应该是 &iframeCallback。否则，请考虑将 data-iframe-callback="testLoad()" 更改为 data-iframe-call-back="testLoad()"。

问题的可能原因是您通过复制粘贴指令的现有代码创建了多个指令，但忘记将指令名称更改为新指令。只需在代码中搜索 iframeOnLoad，我很确定您会找到两个具有此类名称的指令。

发生这种情况是因为 AngularJS 允许注册多个具有相同名称的指令。该模式可用于扩展指令的现有功能。但是，您只能为一个 DOM 元素创建一个隔离作用域，因此两个需要隔离作用域的同名指令是矛盾的。

工作示例请参见here .

重现与您相同的问题 here .