是否可以在ng-model中绑定全局变量?

本文介绍了是否可以在ng-model中绑定全局变量?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对angularJS来说是新的

如果所有控制器在 ng-app 中共享 $ rootScope ，我们是否可以共享分配给 $ rootScope ，以便控制器之间可以相互通信?

If all controllers share a $rootScope in a ng-app, can we share a ng-model which is assigned to the $rootScope, so that controllers could communicate with each other?

使用以下代码段进行测试，但是当 inputController 中的 model 更改时， gName 未能更改，假定可能是 gName 设置为 $ scope.gName .如果是这样，是否有任何方法可以相互通信控制器?即，输入可以显示在其他控制器?

Test with the following snippet, but gName failed to change when model in inputController changed, presume may be gName was made $scope.gName again when input changed. if that is true, is there any way to communicate the controller with each other? ie, the input could be displayed in other controllers?

var app = angular.module("myApp",[]);

app.controller("inputController",    ["$rootScope", "$scope", function($rootScope, $scope){
            $rootScope.gName = "Hello";
   }])
   .controller("displayController1", ["$rootScope", "$scope", function($rootScope, $scope){
   }])
   .controller("displayController2", ["$rootScope", "$scope", function($rootScope, $scope){
   }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
        <hr/>
        <div ng-controller="inputController">
            <input type="text" ng-model="gName"/> <br/>
            <span>{{gName}}</span>
        </div>
        <hr/>
        <div ng-controller="displayController1">
            <span>{{gName}}</span>
        </div>
        <hr/>
        <div ng-controller="displayController2">
            <span>{{gName}}</span>
        </div>
</body>

`推荐答案`

在AngularJS中，$ scope从其父作用域继承(最后将是rootScope)

In AngularJS, $scope inherit from their parent scope (and in the end it will be rootScope)

在Angular中，当孩子更改原始类型时，原始类型将被覆盖.因此，在更改 gName 的输入中，它会保留 $ rootScope.gName 并创建一个仅在以下位置显示的新本地 $ scope.gName 那个控制器

In Angular, primitive types are overwritten when a child changes them. so in the input when changing gName it is keeping the $rootScope.gName and creating a new local $scope.gName that is only showing on that controller

要解决此问题，您可以添加一个对象，并更改其中的属性

to solve the problem you can add an object, and changing the property in it

var app = angular.module("myApp",[]);

app.controller("inputController",    ["$rootScope", "$scope", function($rootScope, $scope){
            $rootScope.prop = { gName: "Hello" };
   }])
   .controller("displayController1", ["$rootScope", "$scope", function($rootScope, $scope){
   }])
   .controller("displayController2", ["$rootScope", "$scope", function($rootScope, $scope){
   }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
        <hr/>
        <div ng-controller="inputController">
            <input type="text" ng-model="prop.gName"/> <br/>
            <span>{{prop.gName}}</span>
        </div>
        <hr/>
        <div ng-controller="displayController1">
            <span>{{prop.gName}}</span>
        </div>
        <hr/>
        <div ng-controller="displayController2">
            <span>{{prop.gName}}</span>
        </div>
</body>

请注意，我只是在回答问题，不建议通过这种方式使控制器彼此通信，您应该为此使用服务，您可以选中此指南

Note I am only answering the question, this way is not recommended for making controllers communicate with each others, you should use services for that, you can check this guide

这篇关于是否可以在ng-model中绑定全局变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！