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

Question

所以我基本上想做的是在 angularjs using 指令中制作一个可重用的组件。该指令将是一个不同的应用程序模块（比如'childApp'）。我正在将这个模块及其依赖项注入到我的主应用程序模块中。我将此指令放在我的主应用程序（比如 mainApp）模块中。该指令的作用是从 mainApp 的 控制器获取数据并在指令中创建一个隔离范围。它从 link 函数调用 childApp 的服务和 returns 一个 html 响应并将其附加到隔离范围，例如 scope.htmlresponse<--(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">

发生绑定，html响应在模板中呈现url。

问题从这里开始：.

我在 templateUrl 中也有 ul li 元素来执行不同的操作，正如您在上面的 templateUrl 代码中看到的那样。

我将 link 定义为：

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

确切问题：
我可以在控制台中看到所需的响应数据，但 scope.htmlresponse = responseData.data; 没有使用新的 html 响应更新模板 url。我是否需要执行其他操作来更新 templateUrl 中的绑定？我已经通过谷歌搜索尝试了一些东西，但它没有帮助。如果有人遇到任何此类问题，请指导我如何解决此问题。谢谢！

Answer 1

嗯，你的问题标题让人误会！ Update directive's templateurl 更像是更改 url，但我认为您的意思是更改模板内容！
另一件事是，我在模板中看不到您的 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 的内容绑定范围的属性更改

Update directive's templateurl's content binding on scope's property change

javascript

angularjs

angularjs-scope

angular-directive

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

Update directive's templateurl's content binding on scope's property change

javascript

angularjs

angularjs-scope

angular-directive

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