ディレクティブ内にテンプレート文字列を作成する

Question

ディレクティブ内にHTMLコードの文字列を作成し、それをディレクティブのテンプレートとして使用しようとしています。

私はこれを試しましたが、動作しません。

myApp.directive('myDirective', [function() { 
    return { 
     restrict: 'E', 
     scope: { 
      data: '='  // this is the data that will shape the HTML 
     }, 
     template: str, 
     controller: function($scope){ 
      $scope.str = ****BUILD THE STRING HERE USING 'data'**** 
     } 
    }; 
}]); 

は私がこれを行うことができます方法については困惑している

myApp.directive('myDirective', ['$scope', function($scope) { 
    var str = ****BUILD THE STRING HERE USING $scope.data**** 
    return { 
     restrict: 'E', 
     template: str 
    }; 
}]); 

をそれから私は、ディレクティブにアプリのスコープを渡してみましたが、再びエラーが発生しました。最初の例では文字列が正しく構築されており、私は

template: {{str}} 

を行うとき、私は、文字列を参照しますが、明らかに、それだけでページ上のテキストとして表示され、それはHTMLコードとして解釈されていません。

ディレクティブのreturn文の中で、myAppまたはディレクティブコントローラのスコープにアクセスする方法はありますか？

ディレクティブの外側に文字列を作成することはできますが、それを行ってもディレクティブ内でmyAppのスコープにアクセスすることはできません。

Answer 1

ディレクティブは、内部スコープ（または分離スコープ）で厳密に定義していない場合は、外部スコープにアクセスできます。例：

angular.module('app',[]).controller('ctrl', function($scope) { 
 
    $scope.example = { 
 
    message: "Hello world" 
 
    }; 
 
}).directive("myDirective", function() { 
 
    return { 
 
    template: '<strong>{{example.message}}</strong>' 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div my-directive></div> 
 
</div>

あなたは上記の例に見ることができるように - ディレクティブは、あなたが実際にそれを注入する必要なしに、外側のスコープ値を「知っています」。

さて、あなたは孤立スコープを作成することができますし、これを行うことにより、指定したスコープに自分自身を制限しない：

angular.module('app',['ngSanitize']).controller('ctrl', function($scope) { 
 
    $scope.example = { 
 
    html: "<strong>Hello world</strong>" 
 
    }; 
 
}).directive("myDirective", function() { 
 
    return { 
 
    scope: { 
 
     data: '=' 
 
    }, 
 
    template: '<div ng-bind-html="data"></div>' 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div my-directive data="example.html"></div> 
 
</div>

ngSanitizeを含むことで、私はngBindHtmlを使用することができディレクティブ内部のスコープにHTML構造体を渡します。

Answer 2

厳密に言えば、ng-ifを使用して、コントローラのデータ数に基づいて異なるディレクティブを使用するhtmlを出力することで達成できます。これは、あなたのプレゼンテーションロジックが所属するビューに移動することを意味し、コントローラーはデータカウント変数を含むビジネスロジックに関係します（これをng -if）。

この方法を使用する場合は、コントローラが使用するサービスにデータを取得し、両方のディレクティブに同じコントローラを使用することをお勧めします。