how to access angular scope outside controller using javascript

Question

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl" id='ang'>
        a=<input ng-model="a">
        <div>{{a}}</div>
        <hr>
        b=<input ng-model="b">
        <div>{{b}}</div>
        <hr>
        <div>{{s}}</div>
        <button onclick="sum()">calc</button>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.a = 10;
            $scope.b = 20;
            $scope.s = Number($scope.a) + Number($scope.b);
        });


        var sum = function () {
            //var scope=angular.element($("#ang")).scope();
            var scope = document.getElementById("ang");
            scope.$apply(function () {
                scope.a = 444;
                scope.b = 222;
                scope.s = 111;
            })
        }
    </script>

</body>

</html>

i am trying to access the scope of angular outside controller and modify the value,but its not working.can we get the scope using document.getElement as we can get using angular.element? please have a look at it and help me out

You either need to write the function inside the controller with $scope — Jijo Cleetus
– Jijo Cleetus, Commented Mar 14, 2017 at 5:14

Ankit Kumar Gupta · Accepted Answer · 2017-03-14 05:18:25Z

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myCtrl" id='ang'>
        a=<input ng-model="a">
        <div>{{a}}</div>
        <hr>
        b=<input ng-model="b">
        <div>{{b}}</div>
        <hr>
        <div>{{s}}</div>
        <button ng-click="sum()">calc</button>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.a = 10;
            $scope.b = 20;
            $scope.s = Number($scope.a) + Number($scope.b);

       $scope.sum = function() {


                $scope.a = 444;
                $scope.b = 222;
                $scope.s = 111;

       }
        });



    </script>

</body>

</html>

why you want to access outside controller.?? try this code

i know to change the values inside the controller,but i want a way to get and change the values outside controller

Amal · Accepted Answer · 2017-03-14 06:09:44Z

Try this code

var demo = angular.module('demo', []);
demo.controller('myCtrl', function ($scope) {
  $scope.a = 10;
  $scope.b = 20;
  $scope.s = Number($scope.a) + Number($scope.b);
});


var sum = function () {
    var scope = angular.element($("#ang")).scope();
    scope.$apply(function(){
    scope.a = 444;
    scope.b = 222;
    scope.s = 111;
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<div ng-app='demo'>
    <div ng-controller="myCtrl" id='ang'>
        a=<input ng-model="a">
        <div>{{a}}</div>
        <hr>
        b=<input ng-model="b">
        <div>{{b}}</div>
        <hr>
        <div>{{s}}</div>
        <button onclick="sum()">calc</button>

    </div>
</div>

Collectives™ on Stack Overflow

how to access angular scope outside controller using javascript

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related