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 очень ценится.

3 Solutions collect form web for “AngularJS + JQuery: как заставить динамический контент работать в 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 validate: Как добавить правило для проверки правильности выражения?
  • Значение времени ожидания по умолчанию для jQuery ajax
  • Можно ли создать поле выбора?
  • jQuery select на основе текста
  • Как передать словарь в качестве параметра методу ActionResult из jQuery / Ajax?
  • Последняя версия jQuery на CDN от Google
  • Передача сложных объектов в службу restа WCF
  • jQuery: получить курсорную позицию текста во входных данных без кода браузера?
  • Почему веб-службы ASP.NET JSON возвращают результат в 'd'?
  • jQuery - незаконный вызов
  • Изменение содержимого div - jQuery
  • Interesting Posts

    Какой диапазон значений может хранить целые типы в C ++

    Как работают манипуляторы streamа?

    Чтение двоичного файла и использование Response.BinaryWrite ()

    HashMap с несколькими значениями под одним и тем же ключом

    Как отправить сообщение Skype из командной строки Windows?

    Как скопировать файл один раз и вставить в несколько подпапок?

    найти все подмножества, которые суммируются с определенным значением

    Просмотр списка привязки к элементу

    Получить тип элемента с помощью jQuery

    Какие модули tkinter были переименованы в Python 3?

    Могу ли я использовать Aero-привязку к верхнему / нижнему, а не влево / вправо при использовании режима портретного отображения для монитора?

    Изменение шрифтов в ggplot2

    Разрешения в HTML-редакторе Bluefish

    Где должна храниться аннотация @Service? Интерфейс или реализация?

    Неверная версия libc6 в Debian Squeeze – могу ли я вернуться?

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