这是指Angularjs中另一个控制器的$ scope

本文介绍了这是指Angularjs中另一个控制器的$ scope的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基本上，单击按钮会从MyController调用ShowHide()函数，如果是$scope.IsVisible==false，则复制该值.

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

但是这里，这个词指向formController的$scope.并且console.log的输出证明了这一点，尽管这是我所期望的，但是有人可以解释一下这是怎么发生的吗?那是因为Javascript原型吗?

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>

脚本:

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);
        }
    }
});

屏幕截图:

推荐答案

您问题的简短答案是使用controllerAs语法.

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>

这篇关于这是指Angularjs中另一个控制器的$ scope的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！