如何在 AngularJS 中通过 id 访问 iframe？答案

【问题标题】：How to access iframe by id in AngularJS?如何在 AngularJS 中通过 id 访问 iframe？
【发布时间】：2016-07-04 23:11:27
【问题描述】：

如何使用 AngularJS 获取 iframe 元素的引用？

<div>
   <iframe id="myframe" ...>
</div>


mycontroller.$inject = ['$document'];

function mycontroller ($document) {
    console.log($document.getElementById("myframe")); //always null
}

我可以看到 iframe，但参考查找总是打印 null。为什么？

【问题讨论】：

你为什么要使用 Angular？从简单的 jquery 调用它:)

标签： javascript html angularjs iframe

【解决方案1】：

$document 服务返回一个数组。你应该像他一样使用它：

console.log($document[0].getElementById("myframe"));

请参阅 jsfiddled 解决方案：https://jsfiddle.net/jjbw1z8j/2/

【讨论】：

【解决方案2】：

使用这个，

angular.element('#myframe');

或

console.log(angular.element('#myframe'));

【讨论】：

【解决方案3】：

在 angular 中与 DOM 元素的交互应在 directives 中实现。

例如jsfiddle。

angular.module('ExampleApp', [])
  .controller('ExampleController', function($scope) {

  })
  .directive('myFrame', function() {
    return {
      link: function(scope, elem) {
        console.log('it`s your iframe', elem);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">
    <div>
      <iframe my-frame></iframe>
    </div>
  </div>
</div>

【讨论】：

因为这不是问题的答案