Edited at

AngularJS で動的にDOM上に追加したディレクティブをパースさせる方法

More than 3 years have passed since last update.

以下のようにする。

$compile(el.contents())($scope)

利用例


html

<div ng-controller="asyncDirectiveCtrl as ctrl">

<button ng-click="ctrl.get1()">失敗</button>
<button ng-click="ctrl.get2()">成功</button>
<div class="asyncDirectiveResult"></div>
</div>


javascript

angular.module('demo', []).

controller('asyncDirectiveCtrl', function($compile, $scope){
this.get1 = function(){
return angular.element('.asyncDirectiveResult').html('<hello>Taro</hello>')
}
this.get2 = function(){
var el = this.get1();
$compile(el.contents())($scope);
}
}).
directive('hello', function($compile){
return {
link: function(scope, el, attr){
el.html('Hello ' + el.text() + ' !')
}
}
})
;

非同期で取得したコンテンツ(markupやmarkdown)内にディレクティブの記述があった場合に有効