$ http.get ломает AngularJS переменные из данных ответа

Question

Я пытаюсь кэшировать HTML-файл, содержащий некоторые угловые переменные, но когда я добавить содержимое файла в йот, все переменные являются просто текст, как {{ variable.name.here }}

Я извлекая файл HTML с $ http.get так:

$http.get('app/shared/partials/raise-error.html').then(function(res){ 
    $templateCache.put('raiseErrorBlock', res.data); 
}); 

... и это повышение-error.html (часть):

<div id="raiseError" ng-show="errorParams.raise" class="slide-down"> 
    <div class="raiseErrorWrapper"> 
     <div class="rew-header"> 
      <i class="fa fa-bug"></i> 
      <span class="rewh-title">{{ errorParams.title }}</span> 
     </div> 
    </div> 
</div> 

Я Runni в блоке $ http.get внутри run() для любого вопроса.

EDIT: от того, что я вижу, это проблема с шаблоном. Поддерживает ли templateCache поддержку переменных или может кэшировать только статические данные?

Answer 1

Вы должны использовать сервис $compile, чтобы угловые выражения работали правильно.

var $el = $compile('<div>{{myData}}</div>')(scope); 
$body.append($el); // wrapped $body with jqLite 

Как ngdoc говорит:

$ компиляция - Компилирует HTML строку или DOM в шаблон и производит шаблонную функцию, которая затем может быть использована для связи с областью применения и шаблона вместе.

Вы также можете использовать более короткий способ хранения чего-либо в $ templateCache, например.

$http.get('http://myserver.com/file.html', { 
    cache: $templateCache 
}).then(function(response) { 
    // do sth 
}); 

Я также создал plnkr для вас. Надеюсь, это поможет вам. http://plnkr.co/edit/ls4kllAvdVb3qMvm3mBA?p=preview