this refer to $scope of another controller in Angularjs

Question

Basically the button click will invoke ShowHide() function from MyController, and if $scope.IsVisible==false, copy the value.

But here, the word this is pointing to the $scope of formController. And the out put of console.log proved this, although this is what im expecting to do, but can someone explain me how did this happen? Is that because of Javascript prototype?

<div ng-app="MyApp" ng-controller="MyController">
    <div ng-controller="formController">
        <div ng-bind="broker.info"></div>
        <div ng-show="IsVisible">Some content to be hide</div>
        <button ng-click="ShowHide()">ok</button>
    </div>
</div>

Script:

var app = angular.module('MyApp', []);
var old = <?=json_encode($broker)?>;
app.controller('formController',function ($scope) {
    $scope.broker = angular.copy(old);
});
app.controller('MyController', function ($scope) {
    $scope.IsVisible = false;
    $scope.ShowHide = function () {
        //If DIV is visible it will be hidden and vice versa.
        $scope.IsVisible = $scope.IsVisible ? false : true;
        if($scope.IsVisible==false) {
            this.broker = angular.copy(old);
            console.log(this);
            console.log($scope);
        }
    }
});

Screenshot:

Possible duplicate of [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs) — Claies, Mar 01 '17 at 21:25

score 0 · Answer 1 · answered Mar 01 '17 at 21:30

Short answer of your question is to use controllerAs syntax.

<!DOCTYPE html>
<html>
<head>
    <title>ControllerAs</title>
    <style>
        div{
            border: 1px solid black;
            margin: 10px;
            padding: 10px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.min.js"></script>

    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('test0', function($scope){
            $scope.message = "Test0";
        });
        app.controller('test1', function($scope){
            $scope.message = "Test1";
        });
        app.controller('test2', function(){
            this.message = "Test2";
        });
        app.controller('test3', function($scope){
            this.message = "Test3";
            var ctrl = this;
            this.changeMessage = function(){
//              ctrl.message = this.newMessage;// doesn't work
                ctrl.message = new String($scope.newMessage);
            }
            $scope.$watch(angular.bind(this, function(){
                return this.message;
            }), function (newVal, oldVal) {
                if(newVal.toString() === oldVal.toString()){
                    console.log("No change");
                } else {
                    console.log("message changed");
                }
              });
        });
    </script>

</head>
<body ng-app="app">

<div ng-controller="test0">
    <h2>message: {{message}}</h2>
    <div ng-controller="test1">
        <h2>message: {{message}} </h2>
        <h2>what is parent message: {{$parent.message}}</h2>
        <div ng-controller="test2 as t2">
            <h2>t2.message: {{t2.message}}</h2>
            <div ng-controller="test3 as t3">
                <h2>t3.message: {{t3.message}} </h2>
                <h2>What was first message: {{$parent.$parent.$parent.message}} </h2>
                <h2>Get previous message: {{t2.message}}</h2>
                <hr/>
                <input type="text" placeholder="Enter new message" ng-model="newMessage"><button ng-click="t3.changeMessage()">Change This Message</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>

this refer to $scope of another controller in Angularjs

1 Answers1

Linked