8

スコープ変数を介してテンプレートの URL を渡そうとしています。スコープは変更されないため、それに基づいてテンプレートを更新する必要はありませんが、現在、スコープ変数は常に未定義です。

<div cell-item template="{{col.CellTemplate}}"></div>

理想的には、ディレクティブは次のようになります。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            scope: {
                template: '@template'
            },
            templateUrl: template // or {{template}} - either way
        };
    }])

ただし、これは機能しません。同じ概念を実現するためにさまざまな順列を試しましたが、これが最も近いようですが、まだ機能しません。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            scope: {
                template: '@template'
            },
            link: function (scope, element, attrs) {
                var templateUrl = $parse(attrs.template)(scope);
                $http.get(templateUrl, { cache: $templateCache }).success(function (tplContent) {
                    element.replaceWith($compile(tplContent)(scope));
                });
            }
        };
    }])

ng-include も使用してみましたが、コンパイル前にスコープ変数を評価しません。CellTemplate の値はデータベース呼び出しから取得されるため、評価前にはまったく不明です。これを機能させるための提案は大歓迎です!

編集: angular 1.0.8 を使用していますが、新しいバージョンにアップグレードできません。

4

3 に答える 3

14

あなたは遠く離れていません。

ディレクティブに分離スコープを使用する必要はありません。次のように templateUrl を渡すことができます。

<div cell-item template="col.CellTemplate"></div>

次に、テンプレートの値が変更されたことを検出するウォッチを追加します。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            restrict: 'A',
            link: function(scope , element, attrs) {

              scope.$watch(attrs.template, function (value) {
                if (value) {
                  loadTemplate(value);
                }
              });

              function loadTemplate(template) {
                  $http.get(template, { cache: $templateCache })
                    .success(function(templateContent) {
                      element.replaceWith($compile(templateContent)(scope));                
                    });    
              }
            } 
        }
    }]);

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

于 2013-10-21T19:54:31.497 に答える
6

リンクロジックを自分で処理したくない場合、または分離スコープが必要な場合は、これがより簡単だと思います：

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
        return {
            scope: {
                template: '@template'
            },
            template: "<div ng-include='template'></div>"
        };
    }])

また：

template:"<ng-include src='template'></ng-include>"
于 2014-09-09T19:56:22.693 に答える
1

これは古い投稿ですが、誰かが答えを求めてここにたどり着いたら役立つと思いました.

@caub がコメントに記載されているように、templateUrl 関数を試すことができます。同じことがコンポーネントにも使用できます。

.directive("cellItem", ["$compile", '$http', '$templateCache', '$parse', function ($compile, $http, $templateCache, $parse) {
    return {
        templateUrl: function(element, attrs) {
           return attrs.template || 'someDefaultFallback.html';
        }
    };
}]);

ここでは、注入された依存関係は必要ありません。これが誰かに役立つことを願っています。

于 2016-10-14T21:22:21.720 に答える