Access AngularJS $scope variable from simple JavaScript code

Question

This does not seems duplicate of

AngularJS access scope from outside js function, as I don't want this variable access on any click!

I have AngularJS code in my Maincontroller.js is

<div ng-controller = "Maincontroller">
   $scope.name = "Hello";
</div>

In My main.HTML file, I have JavaScript code where I want this $scope.name value:

 <html>
       <script>
          // But this seems not possible with {{ name}}
       </script>
 </html>

Is there any possibilities to access this $scope variable in JavaScript code?

wait you want to write javascript code in... javascript? Why don't just write it directly into the ` — CozyAzure, Jan 29 '18 at 10:41
How is it possible to directly use Name in script ? Its giving error by doing so !! — CodeWithCoffee, Jan 29 '18 at 10:41
Forgetting anything to do with setting up the controller in JS, you know you're writting JavaScript code in a `div` right? You need to swap the code you have in your `
` and ` — George, Jan 29 '18 at 10:43
Javascript code in html is written with , whereas $scope.name is in my controller file !! Check updated — CodeWithCoffee, Jan 29 '18 at 10:44
You have html code inside your .js file..? Look up on the first page of AngularJs documentation on how to create a controller. — Adrian, Jan 29 '18 at 10:47
why {{ name}} inside ? in my opinion and understanding, you can just access directly to {{name}} inside html tag without needing the — Lê Gia Lễ, Jan 29 '18 at 10:48
Possible duplicate of [AngularJS access scope from outside js function](https://stackoverflow.com/questions/15424910/angularjs-access-scope-from-outside-js-function) — 0xtvarun, Jan 29 '18 at 10:49
Are you sure your code looks like that, or is [it more like this?](https://jsfiddle.net/etx32pmp/) — George, Jan 29 '18 at 10:50
@George Exactly !! I want to access {{ name }} inside that script tag as mentioned there !! — CodeWithCoffee, Jan 29 '18 at 10:55
Make a real controller, do whatever you want with `name` in it. That's basically the only answer you're going to get. You have things mixed up somehow. Your first code block makes no sense so it's unclear what your problem is, exactly. May I suggest the [AngularJS Docs](https://docs.angularjs.org/api)? — DGarvanski, Jan 29 '18 at 11:09

score 0 · Answer 1 · answered Jan 29 '18 at 12:16

Can you please check below code. What I did is I posted the name on the UI and with the help of id I fetched the value from the javascript code with the help of getElementById and innerHTML.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body >
    <div ng-app="app" ng-controller="Maincontroller">
        Angualr Scope: <h1 id="name">{{name}}</h1>
    </div>

    <div>
        A button to call a function from simple javascript function: <button onclick="getData()">Get Data: </button>        
    </div>

    <script src="../lib/angular.js"></script>

    <script>
        var getData = function(){
            var name = document.getElementById('name');
            console.log(name.innerHTML);
        }
    </script>

    <script>
        var app = angular.module('app', []);
        app.controller('Maincontroller', function ($scope) {
            $scope.name = "Hello";
        });
    </script>
</body>
</html>

Access AngularJS $scope variable from simple JavaScript code

1 Answers1