AngularJSコントローラからの指令

Question

角度1.6。*のコントローラからの指令を使用する必要があります。

私はコードをよく説明します。

コントローラ

$scope.directive = [ 
    "<span my-directive></span>", 
    "<span my-directive2></span>", 
    "<span my-directive3></span>" 
] 

HTML

<div>{{directive}}</div> 

私のソリューションは、次のとおりです。

コントローラ

directive.forEach(function (item) { 
    $compile(item)($scope).appendTo('.navbar'); 
}) 

HTML

<div class="navbar"></div> 

しかし、私の解決策は、DOM依存している、悪いソリューションです。
私はスマートな解決策が必要です。

アイデア？

ありがとうございます！

Answer 1

で定義されています。

次の例を検討してください：

指令HTMLで

function MyBindCompileDirective($compile) { 
    return { 
     restrict: 'A', 
     link(scope, elem, attrs) { 
      attrs.$observe('myBindCompile',() => elem.html($compile(scope.myBindCompile)(scope).html())) 
     } 
    }; 
} 

angular 
    .module('app') 
    .directive('myBindCompile', MyBindCompileDirective); 

使い方を

<div ng-repeat="item in directives" my-bind-compile="item"></div> 

Answer 2

私はngRepeatを繰り返し、必要なものだけを変更して直接指示を出します。コレクションはあなたがng-bindとng-bind-htmlと同様に、あなたのために、このバインディングを行います独自のディレクティブを作成することができ、コントローラ

<div ng-repeat="model in collection"> 
<span my-directive variable="model"></span> 
</div>