AngularJS access scope from outside js function

angularjs angularjs-scope
dk123 picture dk123 · Mar 15, 2013 · Viewed 174.8k times · Source

I'm trying to see if there's a simple way to access the internal scope of a controller through an external javascript function (completely irrelevant to the target controller)

I've seen on a couple of other questions here that

angular.element("#scope").scope();

would retrieve the scope from a DOM element, but my attempts are currently yielding no proper results.

Here's the jsfiddle: http://jsfiddle.net/sXkjc/5/

I'm currently going through a transition from plain JS to Angular. The main reason I'm trying to achieve this is to keep my original library code intact as much as possible; saving the need for me to add each function to the controller.

Any ideas on how I could go about achieving this? Comments on the above fiddle are also welcome.

Answer

Arun P Johny picture Arun P Johny · Mar 15, 2013

You need to use $scope.$apply() if you want to make any changes to a scope value from outside the control of angularjs like a jquery/javascript event handler.

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

Demo: Fiddle

Related questions

How do I use $scope.$watch and $scope.$apply in AngularJS?

I don't understand how to use $scope.$watch and $scope.$apply. The official documentation isn't helpful. What I don't understand specifically: Are they connected to the DOM? How can I update DOM changes to the model? What is the connection …

Read More
How do I access the $scope variable in browser's console using AngularJS?

I would like to access my $scope variable in Chrome's JavaScript console. How do I do that? I can neither see $scope nor the name of my module myapp in the console as variables.

Read More
What is the difference between '@' and '=' in directive scope in AngularJS?

I've read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here's the fiddle. And here are some relevant snippets: From the HTML: <pane bi-title="title" title="{{title}}">{{text}}</pane> From …

Read More