CODEWITHSUNDEEP
javascriptangularjs
abhi
abhi

Reputation: 11

how to access angular scope outside controller using javascript

<!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

Upvotes: 1

Views: 897

Answers (2)

Amal
Amal

Reputation: 3426

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>

Upvotes: 0

Ankit Kumar Gupta
Ankit Kumar Gupta

Reputation: 1322

<!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

Upvotes: 1

Related Questions