Обновить привязку контента директивы templateurl при изменении свойства области

Итак, что я в основном пытаюсь сделать, это создать многоразовый компонент в angularjs с помощью директивы. Эта директива будет другим модулем приложения (например, "childApp"). Я внедряю этот модуль и его зависимость в мой основной модуль приложения. Я помещаю эту директиву в модуль моего основного приложения (например, mainApp). Что делает эта директива, так это то, что она берет данные из контроллера mainApp и создает изолированную область в директиве. Из функции ссылки он вызывает службу childApp, возвращает ответ в формате html и прикрепляет его, чтобы изолировать область действия, например, scope.htmlresponse‹ -- (htmlresponse представляет собой массив). У меня также есть templateurl, определенный в директиве, которая имеет этот код.

URL-адрес шаблона:

<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 отображается в URL-адресе шаблона.

Проблема начинается здесь:.

У меня также есть элементы ul li в templateUrl для выполнения различных операций, как вы можете видеть в приведенном выше коде 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;  
   }
 }

Точная проблема:
Я вижу нужные данные ответа в консоли, но scope.htmlresponse = responseData.data; не обновляет URL-адрес шаблона с новым htmlresponse. Нужно ли мне делать что-то еще, чтобы обновить привязку в templateUrl? Я пробовал несколько вещей из Google, но это не помогает. Если кто-то сталкивался с такой проблемой, подскажите, как ее решить. Спасибо!


javascript angularjs angular-directive angularjs-scope
person Pushpendra    schedule 17.06.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Что ж, заголовок вашего вопроса вызывает недоразумение! Update directive's templateurl больше похоже на изменение URL-адреса, но что, я думаю, вы имеете в виду под изменением содержимого шаблона!
Другое дело, что я не вижу вашего ng-repeat в шаблоне? Вы сказали, что ваши данные - это массив!
И последнее, как вы используете ng-bind-html, не доверяя содержимому 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 в свою директиву.
Надеюсь помочь!

person MeTe-30    schedule 17.06.2016
comment
На самом деле я сделал это следующим образом: templateUrl : ‹div class=container style=overflow-x:auto; ng-bind-html=sanitizeHtml(htmlresponse[0].htmlContent)› и внутри свойства ссылки DDO scope.sanitizeHtml = function(htmlresponse){ return $sce.trustAsHtml(htmlresponse); } Раньше некоторые из моих htmlresponse также не отображались правильно, теперь это так. Спасибо :) и я отредактировал заголовок вопроса. - person Pushpendra; 19.06.2016

arrow_upward
1
arrow_downward

Наконец-то я нашел ответ, но до сих пор не понимаю причину. В своем вопросе я упомянул функцию 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;    
 }

это фактически сделало div URL-адреса шаблона для обновления привязки, следовательно, содержимого. Странный!

person Pushpendra    schedule 19.06.2016