javascript - 无法将 iframe 元素从指令传递给 Angular Controller

Question

我有一个 iframe，上面有一个 ng-src 属性，我经常更改它。每次 iframe 的 src 发生变化时，我都想在 iframe 完全加载后在我的 Controller 中执行一个函数。 另外，我想将 iframe DOM 元素传递到函数中。

现在我正在使用来自 this StackOverflow post 的指令.加载 iframe 时触发回调，并执行我的 Controller 中的函数；但我无法获取作为参数传入的 iframe DOM 元素。

这是一个demo Plunkr

HTML

<div ng-controller='home as main'>
    <h2>My Content Up Here</h2>

    <button ng-click="main.setIframeSource()">Load iFrame Src</button>
    <iframe iframe-onload="main.onIframeLoad(element)" 
      ng-src="{{main.currentIframeSource}}"></iframe>
</div>

Javascript

(function() {
  angular.module('app', [])
    .controller('home', home)
    .directive('iframeOnload', iframeOnload);

  function home() {
    var vm = this;
    vm.currentIframeSource = '';
    vm.setIframeSource = setIframeSource;
    vm.onIframeLoad = onIframeLoad;

    function onIframeLoad(element) {
      console.log(element);
    }

    function setIframeSource() {
      if (vm.currentIframeSource === '' || vm.currentIframeSource === 'iframe2.html')
        vm.currentIframeSource = 'iframe.html';
      else
        vm.currentIframeSource = 'iframe2.html';
    }

  }

  function iframeOnload() {
    var directive = {
      scope: {
        callBack: '&iframeOnload'
      },
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.on('load', function() {
          return scope.callBack(element);
        });
      }
    };

    return directive;
  }
})();

我试过使用 $event 并将 this 作为参数传递给我的 HTML 中的 onIframeLoad 函数，但我永远做不到获取对 iframe DOM 元素的引用。

想法？

Answer 1

当您想要将数据传递给在隔离范围内定义的表达式时，您需要通过具有命名参数的对象传递它们。参见 this documentation page .

所以从理论上讲，您所要做的就是将指令 scope.callback(element) 更改为:

return scope.callBack({element:element});

但是，Angular 正试图在您可以在指令中执行的操作和您可以在 Controller 中执行的操作之间强制分离关注点。你不应该对你的 Controller 中的原始元素做任何事情，所以 Angular 会阻止你做我刚刚写的事情，并将你指向这样一个页面:Error: error:isecdom Referencing a DOM node in Expression

如果你想故意打破规则并做一个变通方法，你可以做的是将元素包装在你自己的对象中然后它会正常通过(但请记住，这不推荐)

  link: function(scope, element, attrs) {
    element.on('load', function() {
      console.log('in directive iframe loaded',element);
      // bad bad bad!
      var elemWrapper = {theElem:element};
      return scope.callBack({element:elemWrapper});
    });
  }

我创建了 a plunker showing that this works (取消注释坏的部分以查看正在传递的元素)