0

コントローラー内に JSON の配列があり、作成したディレクティブを数回使用して ng-repeat を使用して生成したいと考えています。テンプレートで特定のディレクティブの関数を呼び出して、配列からデータを取得してディレクティブに渡すたびに。文字列を完全に取得できますが、結果のテンプレートは HTML コードでなければならないため、Angular はそれを解釈しません。

私が変われば

    template: '< div ng-bind="getTemplate(thiselem)">< /div>',

為に

    template: '< div ng-bind-html="getTemplate(thiselem)">< /div>',

(HTMLコードも表示できるように、「div」キーワードの前にいくつかのスペースを追加しました)

私は自分のプロジェクトで HTML の一部を実行しましたが、通常、中括弧の間のデータを使用するものはすべて解釈されません (未定義または null を返す必要があります)。これらのデータへのアクセスを許可したり、ディレクティブのテンプレートで結果を正しく生成するにはどうすればよいですか?

私の問題を示すために、このプランカーを作成しました。

事前にどうもありがとうございました。

4

2 に答える 2

0

ディレクティブで使用している文字列を補間できます。変数 $interpolate をディレクティブに挿入していることに注意してください。Angular のサイトの公式ドキュメントは次のとおりです: AngularJS: API: $interpolate

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.elements = [
      {id: 1, name: 'bonjour'},
      {id: 2, name: 'bonsoir'}
    ];
  $scope.text = 'Hello world';
});

app.directive("frameelement", ['$interpolate', function($interpolate) {
  return {
        restrict: 'EA',
        scope: {
            thiselem: '='
        },
        template: '<div ng-bind="getTemplate(thiselem)"></div>',
        link: function(scope, element, attrs) {
            scope.getTemplate = function(thiselem) {
                return $interpolate('<h1>{{thiselem.id}} : {{thiselem.name}} tt</h1>')(scope);
            }
        }
    };
}]);
于 2015-12-03T17:29:49.320 に答える
0

渡されたオブジェクトを含め、すべてを文字列と見なして getTemplate() 関数の結果を返しています。実際の値を使用するだけです。

link: function(scope, element, attrs) {
    scope.getTemplate = function(thiselem) {
        return '<h1>' + thiselem.id + ':' + thiselem.name + 'tt</h1>';
    }
}

これがプランカーです: http://plnkr.co/edit/N5ziwjSRDWDMEWAH9ODl?p=preview

于 2015-12-03T17:30:31.157 に答える