AngularJS + JQuery: Angularjs'de çalışan dinamik içerik nasıl elde edilir

Hem jQuery hem de AngularJS kullanan bir Ajax uygulaması üzerinde çalışıyorum.

JQuery'nin htmlişlevini kullanarak bir div'in içeriğini (AngularJS bağlamalarını içeren) güncellediğimde , AngularJS bağlamaları çalışmıyor.

Yapmaya çalıştığım şeyin kodu aşağıdadır:

$(document).ready(function() {
  $("#refreshButton").click(function() {
    $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")
  });
});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

Kimliği olan bir div içinde dinamik içeriğim var #dynamicContentve yenile tıklandığında bu div içeriğini güncelleyen bir yenile düğmem var. İçeriği yenilemezsem, artış beklendiği gibi çalışıyor, ancak yeniledikten sonra AngularJS bağlama çalışmayı durduruyor.

Bu, AngularJS'de geçerli olmayabilir, ancak başlangıçta jQuery ile uygulama oluşturdum ve daha sonra AngularJS kullanmaya başladım, bu yüzden her şeyi AngularJS'ye taşıyamıyorum. Bunun AngularJS'de çalışmasıyla ilgili her türlü yardım büyük beğeni topluyor.

Araman gerek $compileAngular'ın bağlamayı gerçekleştirme şansı elde etmesi için DOM'a eklemeden önce HTML dizesini .

Senin kemanında buna benzer bir şey olurdu.

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

Açıkçası, $compilebunun çalışması için kontrol cihazınıza enjekte edilmesi gerekir.

$compileBelgelerde daha fazlasını okuyun .

Dinamik İçerik Üzerinde Kontrolünüz Olmaması Durumunda Başka Bir Çözüm

Bu, öğenizi bir yönerge yoluyla yüklemediyseniz çalışır (yani, yorumlanmış jsfiddles örneğindeki gibi).

İçeriğinizi Toplayın

JQuery kullanıyorsanız içeriğinizi seçebilmeniz için bir div içine sarın . Öğenizi almak için yerel javascript kullanmayı da tercih edersiniz.

<div class="selector">
    <grid-filter columnname="LastNameFirstName" gridname="HomeGrid"></grid-filter>
</div>

Açısal Enjektör Kullanın

Eğer yoksa, $ compile başvurusu almak için aşağıdaki kodu kullanabilirsiniz.

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

Özet

Orijinal gönderi, elinizin altında bir $ compile referansınız olduğunu varsayıyor gibiydi. Referansınız olduğunda açıkça kolay, ama ben yapmadım, bu yüzden bu benim için cevaptı.

Önceki kodun bir Uyarısı

Küçültme senaryosuna sahip bir asp.net/mvc paketi kullanıyorsanız, yayın modunda dağıttığınızda başınız belaya girer. Sorun, minifier'ın açısal javascript kodu ile uğraşmasının neden olduğu Yakalanmamış Hata: [$ injector: unpr] şeklinde gelir.

İşte bunu çözmenin yolu :

Önceki kod parçacığını aşağıdaki aşırı yükleme ile değiştirin.

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

Bu, onu bir araya getirmeden önce benim için çok fazla keder yarattı.

@ Jwize'nin cevabına ek

Çünkü angular.element(document).injector()hata veriyordu injector is not defined Bu yüzden AJAX çağrısından sonra veya DOM jQuery ile değiştirildiğinde çalıştırabileceğiniz bir fonksiyon yarattım.

  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();
                    }]);
            }

        }

sadece yeni elemanın seçicisini geçerek kullanın. bunun gibi

compileAngularElement( '.user' ) ;