Javascript 局部视图在角度视图中编译不正确

我有一个部分页面试图编译该页面正在工作，只是显示这样的模板

Plunkr在这里可用

问题发现我绑定的是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)).html();
                        $log.info("compiled html-" + compiledHtm);
                        element.html(compiledHtm);
                    });
                }; 
            }
        };
    });

---

我以前从未见过有人尝试以这种方式加载模板。加载模板的正确角度方法如下所示：

• 使用

  ng view

  加载预定义的模板文件
• 构建您自己的自定义指令

我觉得你在尝试第二种方法。下面的代码示例是如何执行此操作的示例

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

在template.html文件中，您将拥有希望加载的模板

有关如何构建自己的自定义指令元素的更多详细信息和示例，请参阅文档中的部分

---

更新：编辑以显示templateUrl示例。

我需要自定义指令中的templateUrl示例，而不是模板（硬编码HTML）。感谢jbw91，我已经意识到这一点，但我的要求是我需要根据url加载模板。url将是指令的一部分。像这样，你是怎么解决的？请将U解决方案的解决方案张贴在plunkr中。

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