6

我尝试实施的 Iframe 指令有问题。

据我所知：模板：

<div class="externalIframe" iframe-src="external.html"></div>

指令：

angular.module('project.directives', [])
   .directive('externalIframe', ['$rootScope', function($rootScope) {
      return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: {
          src: '@iframeSrc', // the src uses the data-binding from the parent scope
        },
        template: '<iframe src="{{src}}" height="100%" width="100%" frameborder="0"></iframe>',
        link: function(scope, elem, attrs) {
          //elem.src = "dummy.html"; // not working either
        }
      }
    }])

问题：它触发 2 个 HTTP 请求（2 个 iframe 加载）。：

  • 一到http://localhost:8000/app/{{src}}（iframe src 尚未被 angular 解释）
  • 一到http://localhost:8000/app/external.html（iframe src 曾经被 angular 解释）

我想避免无用的第一个电话。我该怎么做？

我尝试在模板中不使用 src 并以编程方式将其设置在链接或编译函数中，但这不会触发 iframe 加载。

编辑：jsFiddle添加了带有编译方法的错误演示 => 您将在 firebug/chrome 开发面板的网络选项卡中看到发出了两个请求：

  • http://fiddle.jshell.net/_display/%7B%7Bsrc%7D%7D
  • http://fiddle.jshell.net/_display/external.html

谢谢您的帮助

4

3 回答 3

8

您不需要为此指定指令。ng-src在实际iframe元素上使用。请参阅ng-src 上的文档。

<iframe ng-src="external.html"></iframe>
于 2014-01-17T10:49:05.807 回答
5

从模板中的 iframe 中删除 src 并简单地更改链接函数中的属性（通过 element.attr()）有效：

return {
    restrict: 'E',
    require: '?ngModel',
    replace: true,
    transclude: true,
    template: '<iframe height="100%" width="100%" frameborder="0"></iframe>',
    link: function (scope, element, attrs) {
        element.attr('src', attrs.iframeSrc);
    }
};

小提琴：http: //jsfiddle.net/5rYrw/

于 2013-08-21T13:39:13.470 回答
1

不要使用“链接”，而是使用“编译”功能，因为您本质上是想在插入 DOM 之前修改 HTML。我认为“链接”被插入，然后绑定到范围。

因此，使用链接 1. 使用 {{url}} 调用编译 - 发出 iframe 的请求 2. 调用链接，并替换 {{url}}，因此您第二次调用。

如果您使用“编译”，您可以自己修改 src 属性。

给http://docs.angularjs.org/guide/directive看看，希望这会有所帮助

编辑 检查这个小提琴http://jsfiddle.net/jbSx6/20/

return {
    restrict: 'E',
    require: '?ngModel',
    replace: true,
    transclude: true,
    template: '<iframe src="%url%" height="100%" width="100%" frameborder="0"></iframe>',
    compile: function (element, attrs, transclude) {
        console.log(element[0].outerHTML);
        element[0].outerHTML = element[0].outerHTML.replace('%url%',attrs.iframeSrc);
        console.log(element);
    }
};

<div ng-app="myApp">
   <div>display google in frame</div>
   <my-frame data-iframe-src="http://jsfiddle.net">test</my-frame>
</div>
于 2013-08-21T10:29:40.577 回答