¿Cómo accedo a mi alcance angular desde los botones de diálogo de jQuery?


I'm using a jQuery dialog and want to use the dialog buttons, but I don't know how to get at the scope to trigger a (currently non-existent) $http or $resource call back to the server with the updated model when the jQuery dialog button is clicked. I feel as if I'm going about this wrong, but I don't know what direction to go here.

preguntado el 04 de septiembre de 13 a las 02:09

2 Respuestas

You can use Angular functions to find the scope attached to an element and call a function on it. I prefer to really abstract it away and find the root of the ng-app and broadcast an event into the app so that the outside-code doesn't know about the specifics of the inside code except for the event that you broadcast.

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

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

Then, from any code, you can call something like:

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

And inside the app, I'd do something like this:

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

If you don't like this approach, just get the scope:

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

And do something with it. Just make sure you call scope.$apply or else the digestion cycle won't happen.

Respondido el 04 de Septiembre de 13 a las 02:09

In the above situation is there a way to get a factory or a directive scope? - Ángel S. Moreno

Nvm. It seems that the scope you get is the rootScope. I attached the service to the root scope and was able to call it just how i needed. Thanks for this! - Ángel S. Moreno

Best way is to add directive to control. It is a bad idea to add jQuery with angularjs along side. Directive are made to do this kind of manipulation.

Here's I have modified your plunkr to show you what you can do with directives.

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

         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

Respondido el 04 de Septiembre de 13 a las 02:09

My question has nothing to do with the date picker and is all about the buttons you can add to the jQuery dialog being able to call a controller scope method. - sonicblis

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.