Updating a scope outside of external AngularJs without using "angular.element.scope"

Question

I would like to be able to update the scope in Angular from a function outside of Angular.

For example, if I have a jQuery plugin that returns a successful callback, I would like to be able to update the scope of this callback. Each solution I've seen for this involves calling angular.element(selector).scope , and then calling $apply in the scope that returns. However, I also saw many comments indicating that this does not work when debugging information is disabled, and therefore it is not recommended, but I have not seen alternative solutions.

Does anyone know how to update an area outside of Angular without using angular.element(selector).scope ?

Here is the decision made in the message:

"You need to use $scope.$apply() if you want to make any changes to the scope value outside the control of AngularJs, as a jQuery / javascript event handler.

 function change() { alert("a"); var scope = angular.element($("#outer")).scope(); scope.$apply(function(){ scope.msg = 'Superhero'; }); } 

Here is a warning that .scope() does not work when debugging data is disabled in the message:

"FYI, according to documents using .scope() , requires that Debug data be included, but using Debug data in production is not recommended for speed reasons. The solutions below seem to revolve around the area () - rtpHarry Dec 5 '14 at 15:12 "

I do not see an alternative solution to use .scope () in this post or in other similar posts.

AngularJS access scope due to external js function

Thanks!

Update One of the possible solutions to not use angular.element(selector).scope was assigned a scope in the controller that I used FirstCtrl for the window object. I injected $window into the FirstCtrl controller and did the following:

 $window.FirstCtrlScope = $scope; 

Then from jQuery or another javascript I could do:

 var scope=window.FirstCtrlScope; scope.$apply(function () { // update the scope }); 

Is this a good solution or are there better solutions for updating the area without using angular.element(selector).scope ?

Thanks!

Answer 1

I think both ways are bad. The design, which sets the controllers as global variables or access to the scope through the html element, leads to the creation of a non-usable application with many hidden links.

If you need to collaborate with jQuery plugins (or other angular code), enclose it in a directive with a clear API (attributes, bindings and callbacks).

Answer 2

You can assign a region to the data attribute for an element, and then access it. Look here where this angular -ui-bootstrap library is implemented.