AngularJS + JQuery: как заставить динамический контент работать в angularjs

Я работаю над приложением Ajax, используя как jQuery, так и AngularJS.

Когда я обновляю содержимое (содержащее привязки AngularJS) div, используя функцию html jQuery, привязки AngularJS не работают.

Ниже приведен код того, что я пытаюсь сделать:

 $(document).ready(function() { $("#refreshButton").click(function() { $("#dynamicContent").html("count: {{count}} ") }); }); 
 .ng-invalid { border: 1px solid red; } 
   
count: {{count}}

У меня есть динамический контент внутри div с идентификатором #dynamicContent , и у меня есть кнопка обновления, которая будет обновлять содержимое этого div при щелчке по обновлению. Приращение работает, как ожидается, если я не обновляю контент, но после обновления привязка AngularJS перестает работать.

Это может быть недействительным в AngularJS, но я изначально построил приложение с jQuery и позже начал использовать AngularJS, поэтому я не могу перенести все на AngularJS. Любая помощь в получении этой работы в AngularJS очень ценится.

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

В твоей скрипке это выглядело бы примерно так.

 $("#dynamicContent").html( $compile( "count: {{count}} " )(scope) ); 

Очевидно, что компилятор $compile должен быть введен в ваш controller, чтобы это работало.

Подробнее читайте в документации по $compile .

Другое решение в случае, если у вас нет контроля над динамическим контентом

Это работает, если вы не загрузили свой элемент через директиву (например, как в примере в комментариях jsfiddles).

Оберните свой контент

Оберните свой контент в div, чтобы его можно было выбрать, если вы используете JQuery . Вы также можете использовать собственный javascript для получения вашего элемента.

 

Использование углового инжектора

Вы можете использовать следующий код, чтобы получить ссылку на компиляцию $, если у вас ее нет.

 $(".selector").each(function () { var content = $(this); angular.element(document).injector().invoke(function($compile) { var scope = angular.element(content).scope(); $compile(content)(scope); }); }); 

Резюме

Первоначально сообщение, казалось, предполагало, что у вас есть ссылка на компиляцию. Очевидно, это легко, когда у вас есть ссылка, но я не так, это был ответ для меня.

Одно предостережение предыдущего кода

Если вы используете пакет asp.net/mvc со сценарием minify, у вас появятся проблемы при развертывании в режиме выпуска. Проблема возникает в виде ошибки Uncaught: [$ injector: unpr], которая вызвана беспорядком minifier с угловым кодом javascript.

Вот способ исправить это :

Замените предыдущий fragment кода следующей перегрузкой.

 ... angular.element(document).injector().invoke( [ "$compile", function($compile) { var scope = angular.element(content).scope(); $compile(content)(scope); } ]); ... 

Это вызвало много горя для меня, прежде чем я собрал его вместе.

Добавление к ответу @ jwize

Поскольку angular.element(document).injector() выдавал injector is not defined ошибок, injector is not defined Итак, я создал функцию, которую вы можете запустить после вызова AJAX или когда DOM изменяется с помощью jQuery.

  function compileAngularElement( elSelector) { var elSelector = (typeof elSelector == 'string') ? elSelector : null ; // The new element to be added if (elSelector != null ) { var $div = $( elSelector ); // The parent of the new element var $target = $("[ng-app]"); angular.element($target).injector().invoke(['$compile', function ($compile) { var $scope = angular.element($target).scope(); $compile($div)($scope); // Finally, refresh the watch expressions in the new element $scope.$apply(); }]); } } 

используйте его, перейдя только селектор нового элемента. как это

 compileAngularElement( '.user' ) ; 
  • jQuery AJAX вызывает цикл
  • Как получить элемент nth jQuery
  • Как сделать jQuery 1.7 .on () hover?
  • Можно ли использовать jQuery для чтения метатег
  • Как изменить правила classа CSS с помощью jQuery?
  • Весенняя страница входа в систему безопасности
  • Как перезагрузить / обновить элемент (изображение) в jQuery
  • Изменение размера столбцов SubGrid при изменении размера основной сетки
  • jQuery: сделать флажки как радиокнопки?
  • Как я могу выбрать элемент по ID с помощью jQuery с помощью regex?
  • $ (this) .serialize () - Как добавить значение?
  • Interesting Posts

    Как установить среду рабочего стола по умолчанию при запуске системы?

    Какова функция HTTP-заголовка «Vary: Accept»?

    Как запустить пакетный скрипт перед входом в систему?

    Какие инструменты и методы Android лучше всего подходят для поиска утечек памяти / ресурсов?

    Regex для проверки JSON

    Почему Java не предлагает перегрузку оператора?

    Как управлять генерацией ключевого кадра ffmpeg?

    ASP.NET MVC Razor: как визуализировать HTML-код Razor Partial View внутри действия controllerа

    Как настроить SSH, чтобы он не пытался автоматически загружать все файлы удостоверений?

    Android OnClickListener – идентифицировать кнопку

    Сложность времени рекурсивного алгоритма

    Разница между виртуальным, переопределением, новым и закрытым переопределением

    Почему JSF 2.0 RI (Mojarra) не просматривает annotations моего classа?

    Excel save – как параметры CSV – возможно ли изменить запятую на трубку или вкладку?

    Фильтр Ublock Origin для блокировки рекомендуемых видеороликов на главной странице YouTube?

    Давайте будем гением компьютера.