動的に定義されたディレクティブがコンパイルされていません

Question

ユーザーがAngularjsディレクティブを実行してテストできる拡張マネージャを作成しようとしています。

ユーザーはextensionオブジェクトを作成し、そのオブジェクトを私の関数に渡します。ここで私はそのディレクティブを登録します。

angular.module('CloudBoxes').directive(extension._id, 
    function() { 
     return { 
      template: extension.html, 
      restrict: 'E', 
      replace: true, 
      link: extension.js.controller, 
      scope: extension.js.scope 
     }; 
    } 
); 

テストオブジェクトextension

{ 
    _id: "testid", 
    js: { 
     title: "System.Dir", 
     fa: "fa-folder", 
     include: ["$http"], 
     controller: function (scope, element, attrs) { 
      alert("I am ready"); 
     }, 
     scope: { 
      args: "=", 
     } 
    }, 
    html: "<div></div>" 
}; 

そして私は私のコントローラのいずれかに$compileを使用して、この動的に追加ディレクティブをテストしたいです。 startExtensionイベントの

$scope.$on('startExtension', function (event, id) { 
    var el = $compile("<" + id + ">" + "</" + id + ">")($scope); 
    $element.append(el); 
}); 

id引数は、私は動的ディレクティブを定義するために使用extension._idと全く同じです。

$コンパイル後、ディレクティブは置き換えられません。 DOMについては、以下のようになります

<testid class="ng-scope"></testid> 

ありがとうございました。

Answer 1

ああ私の指！私はそれのための道を見つけようとして死ぬつもりでした。しかし、最終的にそれを行う方法を見つけた！

App.js

var providers = {}; 
angular 
    .module('CloudBoxes', [], function ($controllerProvider, $compileProvider, $provide) { 
     providers = { 
      $controllerProvider: $controllerProvider, 
      $compileProvider: $compileProvider, 
      $provide: $provide 
     }; 
    }); 

extensionFunctionこのfiddleを作成した人に

var queueLen = angular.module('CloudBoxes')._invokeQueue.length; 
if (extension.js.window) { 
    angular.module('CloudBoxes').directive(extension._id, insertArrayAt([ 
     function() { 
      return { 
       template: extension.html, 
       restrict: 'E', 
       replace: true, 
       link: extension.js.controller, 
       scope: extension.js.scope 
      }; 
     } 
    ], 0, extension.js.include)); 
    var queue = angular.module('CloudBoxes')._invokeQueue; 
    for (var i = queueLen; i < queue.length; i++) { 
     var call = queue[i]; 
     var provider = providers[call[0]]; 
     if (provider) { 
      provider[call[1]].apply(provider, call[2]); 
     } 
    } 
    setBindings(extension); 
} else { 
    setBindings(extension); 
} 

感謝を！

Answer 2

AngularJSアプリケーションがブートストラップされると、その時点で登録されたすべてのインジェクタが作成されます。新しいコンポーネントを登録してもインジェクタに追加されないので、$compileには表示されません。

これを行う1つの方法は、新しいコンポーネントを追加する必要があるたびに再作成される2番目のAngularJSアプリケーションを作成することです。あなたは、おそらくiframe内の2つの間の競合を防ぐために、プライマリアプリケーションとは別のDOMにこれを作成したいと思うでしょう。