0 
// Code goes here
var mymodule = angular.module('myapp', []);
mymodule.controller('mycontroller', function ($scope) {

});

mymodule.directive('pvTempUrl',
    function ($http, $compile, $log, $templateCache) {
        $log.info("Directive Called");
        return {
            restrict: 'A',
            replace: true,
            compile: function (telement, tattr, transclude) {
                var templateloader = $http.get(tattr.pvTempUrl, { cache: $templateCache }).
                    success(function (data) {
                        $log.info("Success-" + data);
                        telement.html(data);
                    }).
                    error(function (data, status) {
                        $log.warn("Error occured - " + data + " status-" + status);
                    });
                return function (scope, element, attr) {
                    templateloader.then(function () {
                        var compiledHtm = ($compile(telement.html())(scope)).html();
                        $log.info("compiled html-" + compiledHtm);
                        element.html(compiledHtm);
                    });
                }; 
            }
        };
    });

ページをコンパイルしようとしている部分的なページがあり、テンプレートをそのまま表示しているだけです。

Plunkr はこちらから入手できます

http://plnkr.co/edit/U85rmXhuQGKx5pkzUu99?p=preview

コンパイルされたオブジェクトではなくhtmlをバインドしていた問題が見つかり、以下のような問題が解決しました

// Code goes here
var mymodule = angular.module('myapp', []);
mymodule.controller('mycontroller', function ($scope) {

});

mymodule.directive('pvTempUrl',
    function ($http, $compile, $log, $templateCache) {
        $log.info("Directive Called");
        return {
            restrict: 'A',
            replace: true,
            compile: function (telement, tattr, transclude) {
                var templateloader = $http.get(tattr.pvTempUrl, { cache: $templateCache }).
                    success(function (data) {
                        $log.info("Success-" + data);
                        telement.html(data);
                    }).
                    error(function (data, status) {
                        $log.warn("Error occured - " + data + " status-" + status);
                    });
                return function (scope, element, attr) {
                    templateloader.then(function () {
                        var compiledHtm = ($compile(telement.html())(scope));
                        $log.info("compiled html-" + compiledHtm);
                        //element.html(compiledHtm);
                        element.replaceWith(compiledHtm);
                         $log.info(element.html());
                    });
                }; 
            }
        };
    });
4

1 に答える 1

0

この方法でテンプレートを読み込もうとする人を見たことがありません。テンプレートを読み込む適切な Angular の方法は次のとおりです。

  • を使用ng-viewして、定義済みのテンプレート ファイルをロードします。
  • 独自のカスタム ディレクティブを作成します。

2番目の方法を試みているように感じます。次のコード サンプルは、その方法の例です。

angular.module("myapp")
.directive('buttonsRadio', function() {
return {
    restrict: 'E',
    scope: false,
    controller: function($scope){
        //Any logic required for directive to work.    
    },
    templateUrl: 'template.html'
};
})

template.html ファイルには、ロードしたいテンプレートがあります。

独自のカスタム ディレクティブ要素を作成する方法の詳細と例については、Angular ドキュメントの「ディレクティブの記述(ロング バージョン)」セクションを参照してください。

更新: templateUrl の例を示すように編集されました。

于 2013-07-03T18:53:28.577 に答える