他のangularjs指令をhtmlコードで評価するには

Question

これは簡単な質問だと思っています。私は彼らが運ぶ指示名に基づいて異なって表示したいjavascriptの項目の配列を持っています。例：

ここでは、オブジェクトの小さな配列を作成するためのJavaScriptです。

var stuff = []; 
stuff[0] = {directive: 'plain-text', toDisplay: 'some text'}; 
stuff[1] = {directive: 'super-text', toDisplay: 'some other text'}; 

ここでは、項目を介してHTMLループを作成し、指定されたディレクティブを使用して表示します。私はいくつか試しましたが、何も動作していないようです。助けてくれてありがとう。

Answer 1

@Jakub Judasと賛成です。あなたは指示で$compileとします。

以下の例では、reduceの配列を新しいディレクティブで構成される文字列に変換します。私たちは、その文字列をコンパイルし、最終的にDOMにコンパイルされたHTMLを追加するためにappendを使用する$compileを使用します。私はテキストを表示するng-transcludeを使用していますが、あなたは簡単に修正することができる

var module = angular.module('myApp', []) 
 
    .directive('myTest', function($compile) { 
 
     return { 
 
     restrict: 'E', 
 
     template: '<div></div>', 
 
     link: function($scope, $element, $attrs) { 
 
     \t 
 
     var stuff = []; 
 
\t stuff[0] = {directive: 'plain-text', toDisplay: 'some text'}; 
 
     stuff[1] = {directive: 'super-text', toDisplay: 'some other text'}; 
 
     
 
     var template = stuff.reduce(function(str, thing) { 
 
      return str + "<" + thing.directive + ">" + thing.toDisplay + "</" + thing.directive + ">"; 
 
     }, ''); 
 
     
 
     var compiled = $compile(template)($scope); 
 
     $element.append(compiled); 
 
     } 
 
    } 
 
    }) 
 
    .directive('plainText', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div class="plain-text"><ng-transclude></ng-transclude></div>', 
 
     transclude: true, 
 
    } 
 
    }) 
 
    .directive('superText', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div class="super-text"><ng-transclude></ng-transclude></div>', 
 
     transclude: true, 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <my-test></my-test> 
 
</div>

注意テキストを属性として受け入れる。

また、ディレクティブの名前やテキストがユーザーによって動的に入力された場合、これは安全ではないことに注意してください。この場合、コンテンツを適切にエスケープする必要があります。