2

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.

A.I
  • 1,438
  • 2
  • 16
  • 18
  • you want to access yourName without controller ? isn't it the violation of MVC pattern which Angularjs is based upon? – Yehia Awad Feb 04 '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 04 '16 at 17:54
  • 1
    This answer may also help: http://stackoverflow.com/a/13744085/1362136 (it's basically the same idea as Austin's duplicate source) – Stephen Byrne Feb 04 '16 at 18:01
  • @Austin yep, this does work angular.element($0).scope().yourName; – A.I Feb 04 '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().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 04 '16 at 19:49

1 Answers1

0

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;  
});
jestermax
  • 21
  • 1
  • 2
  • 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: https://docs.angularjs.org/guide/scope, under the section: "Retrieving Scopes from the DOM". Too bad I didn't find it earlier. – A.I Feb 04 '16 at 20:06