1

angular-google-maps ( https://github.com/angular-ui/angular-google-maps )からネストされた Google マップ要素を使用して、Angular.js アプリケーションの jQuery ステップ (ウィザード ジェネレーター) を統合しようとしています。

ただし、次のエラーが表示されます: https://docs.angularjs.org/error/ngTransclude/orphan - 「テンプレートで ngTransclude ディレクティブが不正に使用されています! トランスクルージョンを必要とする親ディレクティブが見つかりません。」

Angular.js リンク フェーズで $compile を使用しているようですが<div ng-transclude></div>、ネストされた要素で置き換えられていません。

HTML:

<div ng-app='tr'>
  <div outer=1>
      XZY987
      <inner>ABC123</inner>
  </div>
</div>

Javascript:

var ngApp = angular.module('tr', []);

ngApp.directive('outer', ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function (scope, ele) {
            ele.wrapInner('<div class="steps-wrapper">');
            var steps = ele.children('.steps-wrapper').steps();
            $compile(steps)(scope);
        }
    };
}]);
ngApp.directive('inner', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: 'WWW <div ng-transclude></div> UUU'
    };

});

Plnkr: http://plnkr.co/edit/GYE57Dz4W4sLHlvSt6VQ?p=preview

ここで、'outer' 要素は jQuery Steps 'wrapped' カスタム ディレクティブを表し、'inner' 要素はトランスクルードとテンプレートを含む Google マップのカスタム ディレクティブです。

私は今日のほとんどこれについて頭を悩ませてきたので、他の誰かが私に指摘する簡単な解決策であることを願っています!

前もって感謝します... ナイジェル

4

1 に答える 1

1

問題は、innerが 2 回コンパイルされることです。compile次の関数の代わりに関数を使用して問題を解決できますlink。

    compile: function(ele){
        ele.wrapInner('<div class="steps-wrapper"></div>');
        var steps = ele.children('.steps-wrapper').steps();
    }

$compile(steps)(scope);タグ内にコンパイルするコードが他にない限り、link 関数内のリンクにコメントを付けることもできますouter。

更新された plunkr : http://plnkr.co/edit/SKqpgT38vGBA92YyRe66?p=preview

于 2015-03-10T09:52:56.190 に答える