AngularJS bir şablon oluşturulabilir, sonra ek kod çalıştırmak için Nasıl?AngularJS:

SORU

6 EYLÜL 2012, PERŞEMBE

AngularJS bir şablon oluşturulabilir, sonra ek kod çalıştırmak için Nasıl?AngularJS:

DOM Açısal bir şablon var. Benim denetleyicisi bir hizmet, yeni bir veri geldiğinde, kapsam$, ve yeniden işler şablondaki modeli günceller. Şu ana kadar iyi.

Konu şablonu yeniden işlenmiş ve DOM (bu durumda bir jQuery eklentisi) sonra da bazı ek iş yapmak istiyorum.

Dinlemek için bir olay olmalı gibi görünüyor, AfterRender gibi, ama öyle bir şey bulamıyorum. Belki bir Direktif gitmek için bir yol olurdu, ama çok erken de ateş gibiydi.

Burada bir jsFiddle benim sorunum özetleyen: Fiddle-AngularIssue

= = = = GÜNCELLEŞTİRİN

Yararlı yorum dayanarak, buna göre DOM manipülasyon işlemek için bir yönerge açık ve izlemek iç yönergesi modeli $uyguluyorum. Ancak, hala öyleyim olan aynı temel sorun; kod içinde $izle olayı harekete önce şablon derlenmiştir ve içine eklenen DOM, bu nedenle, jquery eklentisi her zaman değerlendirilmesi boş bir tablo.

Ben uyumsuz her şey gayet iyi çalışıyor Ara kaldırırsanız böylece ilginç bir şekilde, doğru yönde atılmış bir adım.

Burada bu değişiklikleri yansıtmak için güncellenen kemanımı: http://jsfiddle.net/uNREn/12/

CEVAP

15 HAZİRAN 2014, Pazar

İlk olarak, işleme uğraşmak doğru yere direktifleri. Benim tavsiyem bu gibi direktifleri ile DOM manipülasyonu jQuery eklentileri sarmak için.

Aynı sorun bende de vardı ve bu kod ile geldi. $watch $evalAsync kodu ng-repeat gibi direktifler çözülmüş sonra çalışır sağlamak için kullanır ve {{ value }} işlenmiş gibi şablonlar.

app.directive('name', function() {
    return {
        link: function($scope, element, attrs) {
            // Trigger when number of children changes,
            // including by directives like ng-repeat
            var watch = $scope.$watch(function() {
                return element.children().length;
            }, function() {
                // Wait for templates to render
                $scope.$evalAsync(function() {
                    // Finally, directives are evaluated
                    // and templates are renderer here
                    var children = element.children();
                    console.log(children);
                });
            });
        },
    };
});

Bu sana biraz mücadele önlemeye yardımcı olabilir umuyoruz.

Bunu Paylaş: