Как сказать angular сканировать DOM после использования AJAX для вставки нового контента?

0

Я работаю над проектом, который использует AJAX для загрузки контента, и хотел бы загрузить немного контента, который будет разработан с помощью AngularJS. После загрузки содержимого через AJAX он просто сидит там - Angular не распознает угловые директивы, которые я добавил. Как заставить AngularJS проверять новый код и обрабатывать его?

var ajaxLoad = function(obj){
  $('.target').load('dynamiclyDeterminedHTMLTarget',function(response, status, xhr){
    //Target HTML is loaded, but not parsed by Angular
  });
}

Редактировать:

Для полной ясности я фактически загружаю угловой контент внутри этого звонка. Контроллер находится внутри содержимого ajax. Смотри ниже.

<div class='ajax-loaded-content'>
    <div ng-controller='MyNewCtrl'>
        {{ this_should_be_compiled_but_isn't }}
    </div>
</div>

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

  • 3
    Может быть, опубликовать код, который мы можем посмотреть?
  • 0
    Готово, @DanielCottone. Это был такой маленький кусочек кода, который на самом деле не думал, что он нужен, но, полагаю, это полезный контекст.
Теги:

1 ответ

3
Лучший ответ

Получив ответ HTML через AJAX, используйте службу компиляции $compile чтобы скомпилировать/связать шаблон с некоторой областью.

app.controller('TestCtrl', ['$scope', '$compile', '$element', '$http',
  function ($scope, $compile, $element, $http) {
    $http.get('dynamiclyDeterminedHTMLTarget').then(function (res) {
       // inject the DOM content
       $element.html(res.data);

       // compile/link element contents
       $compile($element.contents())($scope);
    });
  }
]);

Кроме того, вы можете передать запрос AJAX в директиву ngInclude, который позаботится о загрузке, компиляции, связывании и введении содержимого в DOM.

<div ng-include="dynamicallyDeterminedHTMLTarget"></div>
<!-- (provided the scope has a "dynamicallyDeterminedHTMLTarget" property) -->

Если вы инициируете запрос вне цикла "Угловой цикл", вы можете загружать динамический контент как автономное приложение "Угловое".

$('#target').load('dynamicallyDeterminedHTMLTarget', function() {
  angular.bootstrap(this, ['myApp']);
});
Поделиться
  • 0
    Смотрите мои изменения - у меня нет доступа к контроллеру, пока я не добавлю его через ajax. Это унаследованный проект, в который я вкладываю свои взгляды, потому что это самый простой способ реализовать новую функцию.
  • 0
    Вы всегда можете создать внешний контроллер, отвечающий только за загрузку содержимого. В противном случае вы можете использовать ваш контент в качестве корня вашего приложения Angular. Проверьте angular.boostrap .
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню