0 
'use strict';
angular.module('$praveen.directives').directive('pvTempUrl',
    function ($http, $compile, $log) {
        $log.info("Directive Called");
        return {
            restrict: 'A',
            replace:true,
            compile: function (telement, tattr, transclude) {
             var templateloader =   $http.get('../../HelloTemp.html').
                    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, controller) {
                    $log.info("Reached till return part");
                    templateloader.then(function () {
                        var compiledHtm = $compile(telement.html())(scope).html();
                        element.html(compiledHtm);
                    });
                    
                } 
            }
        };
    });

var compiledHtm = $compile(telement.html()(scope)); コードをコンパイルする代わりに、テンプレートの URL を直接使用できますか。

編集:$compile(telement.html())(scope).html();コンパイル後にhtmlを取得するように編集しまし<input class="ng-pristine ng-valid" type="text" ng-model="txtData">{{ txtData }}
たが、それでもng-modelは機能せず、{{ txtData }]を表示しているため、コンソールにもエラーはありません。

解決済み

コンパイルされたオブジェクトではなく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());
                    });
                }; 
            }
        };
    });

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

4

1 に答える 1

0

これで問題は解決しますか?

angular.module('$praveen.directives').directive('pvTempUrl', function($compile, $http, $log, $templateCache) {
    $log.info("Directive Called");
    return {
        restrict: 'A',
        replace: true,
        compile: function(tElement, tAttrs) {
            var templateLoader = $http.get('../../HelloTemp.html', {
                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, attrs) {
                templateLoader.then(function(templateText) {
                    element.html($compile(tElement.html())(scope));
                });
            };
        }
    };
});

また、いくつかのテンプレート キャッシュも含めました。

于 2013-07-02T18:48:25.797 に答える