Javascript 如何在指令链接函数中为变量添加TemplateURL？_Javascript_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Ng Include

Javascript 如何在指令链接函数中为变量添加TemplateURL？

javascript angularjs

Javascript 如何在指令链接函数中为变量添加TemplateURL？,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-include,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Include,如何在指令的链接函数中包含模板URL？我正在尝试这样做： app.directive('something', function($compile,$timeout) { return: { link: function(scope,element,attrs) { var htmlText = ???? // HOW TO INCLUDE A TEMPLATE URL HERE?? $compile(htmlText)(s

如何在指令的链接函数中包含模板URL？我正在尝试这样做：

app.directive('something', function($compile,$timeout) {

   return: {

      link: function(scope,element,attrs) {

           var htmlText = ???? // HOW TO INCLUDE A TEMPLATE URL HERE??

            $compile(htmlText)(scope, function(_element,_scope) {
         element.replaceWith(_element);                 
    });

      }, 

   }

});

当我搜索时，我知道Angular指令可以使用

templateUrl

。但是我试图将html代码存储到一个变量中，该变量放在

链接中，该链接最终被编译。通常对于小代码，我只是在var htmlText
中内联键入HTML。但是如果我有很多代码，我想将其保存到一个单独的html文件中，然后为该变量调用它（如上面的示例所示）。所以我的问题是
1）如何为链接中的变量添加模板URL链接？

2）当我添加url路径时，我是从index.html文件所在的位置添加相对路径还是从该指令文件所在的位置添加路径？
好的，为了解决这个问题，您可以在使用$compile
呈现的普通
中使用ng include
，例如：
link: function(scope,element,attrs) {

       var htmlText = '<div ng-include="path/to/template.html"></div>';

       $compile(htmlText)(scope, function(_element,_scope) {
       element.replaceWith(_element);                 
});

链接：函数（范围、元素、属性）{
var htmlText=''；
$compile（htmlText）（作用域，函数（_元素，_作用域）{
元素。替换为（_元素）；
});

[编辑]
甚至还有一个更好的解决方案
路径取决于Web服务器的配置方式。但通常是的，它是Index.html的相对路径。
您可以使用
是显示其工作原理的代码：
<body ng-app="App">
    <!-- Include template in $templateCache AUTOMATICALLY -->
    <script type="text/ng-template" id="auto.tpl.html">
        <span style="background-color:yellow">{{title}}</span>        
    </script>

    <dir tpl-id="auto.tpl.html" title="Automatic"></dir>
    <dir tpl-id="manual.tpl.html" title="Manual"></dir>
</body>


{{title}}

脚本：
angular.module（'App'，[]）
.directive（'dir'，['$templateCache'，'$compile'，function（$templateCache，$compile）{
返回{
限制：'E'，
范围：正确，
链接：函数（$scope、iElement、attrs）{
//在$templateCache中手动包含模板
$templateCache.put（'manual.tpl.html'，'{{title}'）；
//----------------------------            
$scope.title=attrs['title']；
$compile（$templateCache.get（attrs['tplId']））（$scope，function（cElement）{
替换为（加速）；
});
}
};
}]);
我不太明白为什么不能使用templateUrl
属性？以前在转包和异步获取模板方面存在一些问题，但据我所知，这些问题已在较新版本中得到解决。据我所知，如果模板依赖于范围数据，我认为templateUrl属性不起作用。似乎在这里起作用：但如果指令的作用域不是孤立的，可能会有问题？`我以前从未听说过这是一个问题。很好的例子…是的，它似乎在孤立的作用域中工作得很好。但是当我把它设为scope=false
时，它就不起作用了。我将进一步研究这个问题，并进行一些讨论。谢谢您的展示这是：）太完美了！在一个普通的
中使用ng include
方法是一个好主意，也很简单。我在你给出的线程中使用了使用$http
和$templaceCache
的解决方案。非常感谢。你的回答对我帮助很大。干杯！谢谢@Engineer。我喜欢你的方法oo。不过，与其他解决方案相比，这看起来需要做很多工作。不过，谢谢您。您的回答让我了解了如何使用$templateCache。非常感谢！
angular.module('App',[])
.directive('dir',['$templateCache','$compile',function($templateCache,$compile){
    return {
        restrict:'E',
        scope:true,
        link:function($scope, iElement, attrs){
            //Include template in $templateCache MANUALLY
            $templateCache.put('manual.tpl.html','<span style="background-color:red">{{title}}</span>');
            //----------------------------            

            $scope.title = attrs['title'];
            $compile($templateCache.get(attrs['tplId']))($scope,function(cElement){
                iElement.replaceWith(cElement);                
            });
        }
    };
}]);