Question

每当我尝试动态加载指令时（例如：使用Jquery和$ compile），

使用 TemplateUrl 的自定义指令无法正确评估角度表达式，如下所示：

var  scope = angular.element(document.getElementById("test1")).scope();
var _html='<div>{{name}}-</div><mydirectivewithtemplateurl Generated Dynamically Using TemplateUrl >Not Succeed</mydirectivewithtemplateurl>';
$('#content').html($compile(_html)(scope));

可是：

1-当我直接将相同的指令（使用TemplateUrl）放入页面时，如下所示：

<mydirectivewithtemplateurl waytoload="Generated Stastically Using TemplateUrl ">Not Succeed</mydirectivewithtemplateurl>

工作正常。

2-当我使用Template而不是TemplateUrl并以与上面相同的方式动态加载时，也能正常工作：

 var  scope = angular.element(document.getElementById("test1")).scope();
            var _html='<div>{{name}}-</div><mydirectivewithtemplateonly  waytoload="Generated Dynamically Using Template" >Not Succeed</mydirectivewithtemplateonly>';
           $('#content').html($compile(_html)(scope));
           setTimeout(function(){ scope.$apply();});

这是我使用TemplateUrl的自定义指令

app.directive('mydirectivewithtemplateurl',function ()
    {

      return {
     scope : {
       loadedstate:'@waytoload',

     },
    //template:'<div>{{loadedstate}}</div>',
     templateUrl:'grid.html',

    }
    })

这是我使用Template的自定义指令：

app.directive('mydirectivewithtemplateonly',function ()
{

  return {
  scope : {
   loadedstate:'@waytoload',

 },
template:'<div class="panel panel-primary">{{loadedstate}}</div>'
// templateUrl:'grid.html',

} })

所以我的问题是：当我使用 TemplateUrl （而不是模板）并加载动态（jquery和@）时，如何在自定义指令内正确评估角度表达式编译）为了更好地理解我的问题，请参阅完整的演示，其中包含以下代码：http://plnkr.co/edit/f2eUdUwQF7o4pMCOHkLw?p=preview 并随时直接更新代码。 请注意：在TemplateUrl中定义的路径是正确的，并在直接添加到该页面时进行测试感谢

Answer 1

您可以尝试绝对路径：

...
templateUrl: 'app/directives/mydirective.html'
...

Answer 2

异步加载该模板的东西，时间可能是一个问题，所以使用一个promise，尝试在链接函数中调用模板并注释掉templateURL：

link : function(){
   $templateRequest("grid.html").then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
   });
 }

动态生成的自定义指令使用TemplateUrl时未正确加载

2 个答案: