Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

This question already has an answer here:

Okay, so here is a sample hello world code from the angularjs homepage:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Now, this model variable yourName must have been created somewhere (in some scope), and it certainly can't be accessed using:

<script>
         console.log(yourName);
</script>

How can we access this variable, WITHOUT creating a module and assigning a controller to it, and then accessing it using $scope.yourName

Not that this is a requirement, but I certainly need it to clear some concepts.

share|improve this question

marked as duplicate by Community♦ Feb 4 '16 at 19:50

This question was marked as an exact duplicate of an existing question.
    
you want to access yourName without controller ? isn't it the violation of MVC pattern which Angularjs is based upon? – Yehia Awad Feb 4 '16 at 17:50
    
this certainly isn't a good practice, but assuming if we COULD, how would we do it. Basically, want to understand how angular works in the scenario when we just use the directive ng-app, without assigning it a module. – A.I Feb 4 '16 at 17:54
1  
This answer may also help: stackoverflow.com/a/13744085/1362136 (it's basically the same idea as Austin's duplicate source) – Stephen Byrne Feb 4 '16 at 18:01
    
@Austin yep, this does work angular.element($0).scope().yourName; – A.I Feb 4 '16 at 18:46
    
So, basically this is what is happening: Angular encounters the directive ng-app, and it creates a root scope for the application. The variable 'yourname' is inside the root scope, since there is no other scope created in the app. The expression angular.element(<some selector>).scope() gives me the scope associated with the element selected, which in this case happens to be the root scope, and I can access the variable from the root scope. Thanks @StephenByrne for the pointers – A.I Feb 4 '16 at 19:49
up vote 0 down vote

I'm aware that it's "evil" to try to do what you're doing, but I've been in a similar situation with legacy code that can't be rewritten. From what I gather though, you'd like to access a controller variable from outside of Angular.

Because the controller is an instance, you can't really access it from outside of Angular. You need a way to publish data from your internal model to outside of the scope of Angular. One way is to use a watch on that model and when it changes, assign it to a variable on "window". To do this, I'd suggest creating a separate Angular service to do the actual publishing, so the sins are better contained there. 

$scope.$watch('yourName', function() {
    // If you have a Service to do this, you would use: 
    //myPublishService.publish("yourName", $scope.yourName)
    window.yourName = $scope.yourName;  
});
share|improve this answer
    
Nah! There is no controller involved here. Your answer does solve the problem of debugging scope variables, but that was not what I intended. Turns out that what I needed was already there in the documentation: docs.angularjs.org/guide/scope, under the section: "Retrieving Scopes from the DOM". Too bad I didn't find it earlier. – A.I Feb 4 '16 at 20:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.