Question

我遇到了一个我尝试实现的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加载。

编辑：使用编译方法为bug演示添加了jsFiddle =＆GT;你会在firebug / chrome dev面板的网络标签中看到两个请求：

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

感谢您的帮助

Answer 1

你不需要这个指令。在实际ng-src元素上使用iframe。请参阅docs on ng-src。

<iframe ng-src="external.html"></iframe>

Answer 2

从模板中的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/

Answer 3

不使用'link'而是使用'compile'函数，因为您基本上希望在插入DOM之前修改HTML。我认为'link'已插入，然后绑定到范围。

所以有了链接 1.使用{{url}}调用compile - 由iframe发出请求 2.链接被调用，{{url}}被替换，因此你第二次调用。

如果你使用'compile'，你可以自己修改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>

Angular：iframe指令中的src属性错误

3 个答案: