Как скомпилировать данные, возвращенные из запроса $ http?

Question

У меня возникает повторяющаяся проблема, когда я не могу использовать директивы, которые включены внутри частичных частей шаблона, полученных через $ http. Я предполагаю, что мне нужно использовать $compile или $apply шаблону, чтобы заставить директивы работать. Следующий код пытается использовать $ применять на возвращаемые данные из $http, но он не работает:

$http({ 
    url: 'get/data', 
    method: "POST" 
}) 
.success(function (data, status, headers, config) { 
    $scope.$apply(function() { 
     $scope.data = data; 
    }); 
}) 
.error(function (data, status, headers, config) { $scope.status = status; }); 

возвращаемое значение (data) просто шаблон, который содержит некоторые HTML, который имеет несколько директив в нем. Если я напишу

.success(function (data, status, headers, config) { $scope.data = data } 

затем шаблон загружается, но любые директивы в шаблоне не будут работать. Поэтому я решил, что мне нужно использовать $apply или $compile, чтобы привязать директивы к угловым. Очевидно, есть что-то принципиальное, что мне не хватает в моем понимании угловатости и о том, как директивы могут работать в динамически загружаемых шаблонах. Любая помощь приветствуется.

Answer 1

Вы можете просто загрузить шаблон через templateUrl (http://docs.angularjs.org/guide/directive). Основная идея заключается в том, что вы пишете директиву в js, это соответствует html в отдельном файле, который может быть включен в эту директиву через templateUrl.

Answer 2

Вы правы, что вам нужно использовать службу компиляции $ для обработки директив в динамически загружаемом шаблоне. $ compile обрабатывает некоторый html и возвращает функцию привязки. Когда функция связывания вызывается с областью действия, она возвращает полностью скомпилированный и связанный шаблон с действующими директивами. Затем этот шаблон должен быть вставлен в живую DOM. Как указывает zsong, это означает, что все это должно быть сделано в директиве, которая является областью манипуляций DOM в Angular. В одной строке:

container.html($compile(loadedHtml)(scope)) 

контейнер - это элемент в DOM, который будет содержать динамический шаблон. Мы устанавливаем его html в результате связывания скомпилированного html с областью.