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 の読み込み) を起動します。:

  • one to http://localhost:8000/app/{{src}}(角度によってまだ解釈されていない iframe src)
  • one to http://localhost:8000/app/external.html(angular によって解釈された iframe src)

無駄な最初の呼び出しを避けたい..どうすればそれを行うことができますか?

テンプレートに src を使用せずに試し、プログラムでリンクまたはコンパイル関数に設定しましたが、iframe の読み込みが開始されません。

編集: jsFiddleがコンパイル メソッドを使用してバグ デモ用に追加されました => firebug/chrome dev パネルのネットワーク タブに、2 つの要求が行われていることがわかります。

  • 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}} が置き換えられるため、2 番目に呼び出します。

'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>
于 2013-08-21T10:29:40.577 に答える