Emil Emil - 2 months ago 6
AngularJS Question

Access Angular object's function from outside JS

I'm building a HTML-app with the AngularJS framework. I have some legacy JavaScript actions that needs to access a function within the Angular-object, and I can't get it to work.

This is the Angular-object (function I need to access is the

$scope.info()
):

function content($scope) {
$scope.info = function (id) {
console.log('Got a call from '+id);
$scope.text = "Hello, "+id;
};
}


I have attempted to access it through
angular.element('content').scope().info('me')
, but with no result (console says
undefined
). I attempted to dump the result of
angular.element('content').scope()
, and I got the full object list and everything. Theoretically, my first example should work, however it does not.

Any guidance as to how I can achieve this is much appreciated!

(PS: Call Angular JS from legacy code did not resolve this).




When I was finally able to access the function, it didn't work as expected – the value of
$scope.text
is technically modified, but the expressions used in the HTML are not updated! For example,
<p>{{text}}</p>
does not get updated after this function is called from an external function.

Is there any way to fix this?

Answer

angular.element() expects a DOM element, so if you have this html:

<div ng-controller="content">
</div>

and you want to access its DOM element, use an id:

<div id="myDiv" ng-controller="content">
</div>

Then

angular.element($('#myDiv')).scope().info('me')

or without jQuery:

angular.element(document.getElementById('myDiv')).scope().info('me')

should work.

Edit:

If you changed something on the scope, you will probably need to use $apply():

angular.element(document.getElementById('myDiv')).scope().$apply();