javascript - 此代码角度自定义指令有什么问题

Question

'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);
                    });
                    
                } 
            }
        };
    });

Error iscoming function required at the linevar 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

Answer 1

这能解决你的问题吗？

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));
                });
            };
        }
    };
});

我还包括了一些模板缓存。