Jak uzyskać dostęp do zakresu kątowego z przycisków dialogowych jQuery?

Question

http://plnkr.co/edit/Rf0VItthVBg6j0z7KudO

Używam okna dialogowego jQuery i chcesz używać przycisków dialogowych, ale nie wiem, jak się w zakresie do wyzwalania (obecnie nieistniejąca) $ http lub $ zasobów oddzwonić do serwera ze zaktualizowanym modelem po kliknięciu przycisku dialogowego jQuery. Czuję się tak, jakbym zamierzał o tym źle, ale nie wiem, w którą stronę tu pójść.

Answer 1

Możesz użyć funkcji Kątowych, aby znaleźć zakres dołączony do elementu i wywołać na nim funkcję. Wolę go oddzielić i znaleźć katalog główny ng-app i nadać zdarzenie w aplikacji, aby zewnętrzny kod nie znał szczegółów kodu wewnętrznego, z wyjątkiem zdarzenia, które emitujesz.

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

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

Następnie z dowolnego kodu, można nazwać coś takiego:

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

i wewnątrz aplikacji, chciałbym zrobić coś takiego:

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

Jeśli don” Takie podejście, po prostu zasięg:

var scope = angular.element(selector).scope(); 

I zrób coś z tym. Po prostu upewnij się, że dzwonisz pod numer scope.$apply, bo inaczej cykl trawienia się nie stanie.

Answer 2

Najlepszym sposobem jest dodanie dyrektywy do kontroli. Nie jest dobrym pomysłem, aby dodać jQuery z angularjs obok. Podjęto dyrektywę, aby dokonać tego rodzaju manipulacji.

Oto, jak zmodyfikowałem twój numer plunkr, aby pokazać, co możesz zrobić z dyrektywami.

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