Açısal kapsamıma jQuery iletişim düğmelerinden nasıl erişirim?

Question

http://plnkr.co/edit/Rf0VItthVBg6j0z7KudO

Ben $ http veya bir jQuery iletişim kutusunu kullanarak ve iletişim düğme kullanmak, ancak bir (şu anda var olmayan) tetiklemek için kapsam ulaşmak için nasıl bilmiyorum ediyorum $ geri çağırmak kaynak jQuery iletişim düğmesine tıklandığında güncellenmiş model ile sunucuya. Bu yanlış anlıyorum gibi hissediyorum, ama burada nereye gitmek gerektiğini bilmiyorum.

Answer 1

Bir öğeye eklenen alanı bulmak ve üzerinde bir işlevi çağırmak için Açısal işlevleri kullanabilirsiniz. Ben gerçekten bunu soyutlamak ve ng-app kökünü bulmak ve uygulama içine bir olay yayınlamak için tercih ederim, böylece dış kod, yayınladığınız olay haricinde, iç kodun özelliklerini bilmiyor. Eğer 'etmezsen

$rootScope.$on('doSomething', function(parameters) { 
    // handle the external event. 
}); 

:

angular.$externalBroadcast = function (selector, event, message) { 
    var scope = angular.element(selector).scope(); 

    scope.$apply(function() { 
     scope.$broadcast(event, message); 
    }); 
}; 

Sonra herhangi koddan, gibi bir şey çağırabilirsiniz:

angular.$externalBroadcast('#app-container', 'doSomething', parameters); 

Ve uygulamanın içinden, böyle bir şey yapacağını Bu yaklaşımı beğenmediğinizde, yalnızca şu kapsamı edinin:

Ve onunla bir şey yap. Sadece scope.$apply'u aradığınızdan emin olun, aksi takdirde sindirim döngüsü gerçekleşmeyecektir.

Answer 2

En iyi yol, denetime yönerge eklemektir. Yan taraftaki anggular ile jQuery eklemek kötü bir fikirdir. Direktif bu tür bir manipülasyon yapmak için yapılır.

Yönergeler ile neler yapabileceğinizi göstermek için plunkr numaralı telefonu değiştirdim.

app.directive('date', function() { 
    return { 
    restrict: 'A', 
    require: '^ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
     var dp = $(elm); 

     dp.datepicker({ 
     onSelect: function(dateText) { 
      scope.$apply(function() { // Apply cause it is outside angularjs 
      ctrl.$setViewValue(dateText); // Set new value of datepicker to scope 
      }); 
     } 
     }); 

     scope.$watch(attrs.ngModel, function(nv) { 
     dp.datepicker('setDate', nv); // Update datePicker date when scope change 
     }); 
    } 
    }