無法將 iframe 元素從指令傳遞給 Angular 控制器

Question

我有一個帶有ng-src屬性的iframe ，我經常更改它。 每次 iframe 的src更改時，我想在 iframe 完全加載后在我的控制器中執行一個函數。 另外，我想將 iframe DOM 元素傳遞到函數中。

現在我正在使用這個 StackOverflow 帖子中的指令。 加載 iframe 時會觸發回調，並且我的控制器中的函數會執行； 但我無法獲取作為參數傳入的 iframe DOM 元素。

這是一個演示 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

當您想將數據傳遞給在隔離作用域中定義的表達式時，您需要通過具有命名參數的對象來傳遞它們。 請參閱此文檔頁面。

所以理論上，您所要做的就是將指令scope.callback(element)更改為：

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

但是，Angular 正試圖在指令中可以做什么和在控制器中可以做什么之間強制分離關注點。 您不應該對控制器中的原始元素執行任何操作，因此 Angular 會阻止您執行我剛剛編寫的操作並將您指向這樣的頁面： 錯誤：錯誤：isecdom 在表達式中引用 DOM 節點

如果你想故意打破規則並做一個解決方法，你可以做的是將元素包裹在你自己的對象中，然后它就會通過（但請記住，不推薦這樣做）

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

我創建了一個 plunker，顯示它有效（取消注釋不好的部分以查看正在傳遞的元素）