How do I access my angular scope from jQuery dialog buttons?

Question

http://plnkr.co/edit/Rf0VItthVBg6j0z7KudO

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.

Answer 1

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.