Question

所以我基本上要做的是在angularjs中使用指令创建一个可重用的组件。该指令将是一个不同的应用程序模块（例如' childApp '）。我正在将此模块及其依赖项注入我的主app模块。我将此指令放在我的主应用程序（例如 mainApp ）模块中。该指令的作用是从 mainApp的控制器获取数据并在指令中创建隔离范围。在链接函数中，它调用childApp的服务并返回一个html响应，并将其附加到隔离范围，如scope.htmlresponse＆lt; - （htmlresponse作为数组）。我还在指令中定义了templateurl，其中包含此代码。

templateUrl：

<ul class="nav navbar-nav">
  <li>
    <a href="" ng-click="doSomething()">
      <i class="icon"></i>SomeOperation</a>
  </li>
 </ul
 <div class="container" style="overflow-x:auto;" ng-bind-html="htmlresponse[0].htmlContent">

发生绑定，htmlresponse在templateurl中呈现。

问题从这里开始：。

我还在templateUrl中有ul li个元素来执行不同的操作，如上面templateUrl的代码所示。

我的链接定义如下：

 link: function(scope, element, attrs){
    init();  /*--**This was first call I was talking about in my question above which was returning htmlresponse**--*/
   scope.doSomething = function(){
   /*--** Makes a service call and this also returns an html response**--*/
  //example service code similar to my code
     childAppService.makeSecondServiceCall(scope.document).then(function(htmlresponse)       
     {
      renderHtml(htmlresponse);
     });
   }
 function renderHtml(responseData){
    console.log(responseData);
    if(responseData.status == 200)
      scope.htmlresponse = responseData.data;  
   }
 }

确切问题：
我可以在控制台中看到responseData，但scope.htmlresponse = responseData.data;没有使用新的htmlresponse更新模板URL。我是否需要做其他事情来更新templateUrl中的绑定？我用谷歌搜索了一些东西，但它没有帮助。如果有人遇到任何此类问题，请指导我如何解决这个问题。谢谢！

Answer 1

好吧，你的问题标题会引起误解！ Update directive's templateurl更像是更改网址，但我认为您的意思是更改模板内容！另一件事是，我在模板中看不到你的ng-repeat？你说你的数据是阵列！
最后一点是，如何在不信任html内容的情况下使用ng-bind-html？我建议你把代码改成这个：

scope.doSomething = function() {
    childAppService.makeSecondServiceCall(scope.document).then(function(res)       
                                                               {
        scope.$applyAsync(function() {
            if(res.status == 200) {
                for (var i=0, j=res.data.length; i<j; i++) {
                    res.data[i].htmlContent = $sce.trustAsHtml(res.data[i].htmlContent);
                }
                scope.htmlresponse = res.data;
            }
        });

    });
}

不要忘记在你的指令中注入$sce 希望能帮到你！

Answer 2

我终于找到了答案，但我仍然没有理由。在我的问题中，我提到了一个init();函数，其中我设置了scope.htmlResponse = [];所以基本上每个服务都有.then()为

.then(function(htmlresponse)       
 {
  renderHtml(htmlresponse);
 });

这使得他们通过我正在设置的renderHtml（hmtlresponse）

 if(responseData.status == 200)
  scope.htmlresponse = responseData.data;

我把它改成了这样的东西：

 if(responseData.status == 200){
  scope.htmlresponse = [];
  scope.htmlresponse = responseData.data;    
 }

这实际上使模板url div更新了绑定因此内容。奇怪！

更新指令的templateurl对范围属性更改的内容绑定

2 个答案: