AngularJS控制器未随根作用域更新问题求助

嘿，我明白你遇到的麻烦了——根作用域的输入和显示能正常更新，但FirstCtrl和SecondCtrl里的内容却没法跟着同步，对吧？这其实是AngularJS作用域原型继承的一个经典“坑”，我来给你拆解一下原因和解决方案。

问题根源：作用域的原型继承特性 #

当你在根作用域的输入框里输入内容时，AngularJS会自动在根作用域下创建一个data对象。但你的两个控制器里的$scope.data并没有继承这个根作用域的对象——因为在控制器作用域中，当你第一次在输入框输入内容时，AngularJS会在当前控制器的私有作用域下新建一个data属性，而不是去修改根作用域的data。这就导致三个作用域各持有自己的data，自然没法同步更新了。

解决方案：提前初始化根作用域的对象 #

我们只需要提前在根作用域中初始化data对象，这样控制器的作用域就能通过原型继承访问到同一个对象，修改对象内的属性时，所有绑定的地方都会同步更新。下面是两种常用的实现方式：

方式一：使用根控制器初始化（推荐，符合最佳实践）

修改你的HTML和JS代码如下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>AngularJS</title>
</head>
<body>
    <!-- 指定自定义模块，并添加根控制器 -->
    <div ng-app="myApp" ng-controller="RootCtrl">
        <input type="text" ng-model="data.message">
        <h1>{{data.message}}</h1>
        <div ng-controller="FirstCtrl">
            <input type="text" ng-model="data.message">
            <h1>{{ data.message}}</h1>
        </div>
        <div ng-controller="SecondCtrl">
            <input type="text" ng-model="data.message">
            <h1>{{ data.message}}</h1>
        </div>
    </div>
    <script type = "text/javascript" src="main.js"></script>
</body>
</html>

main.js代码：

// 创建AngularJS模块
var app = angular.module('myApp', []);

// 根控制器：提前初始化data对象
app.controller('RootCtrl', function($scope) {
    $scope.data = { message: "" };
});

// 子控制器无需额外代码，直接继承根作用域的data
app.controller('FirstCtrl', function($scope) {});
app.controller('SecondCtrl', function($scope) {});

方式二：使用ng-init快速初始化（适合简单场景）

如果你不想额外写根控制器，也可以直接在根元素上用ng-init初始化data对象，效果一样：

<div ng-app="myApp" ng-init="data={message: ''}">

对应的JS只需要创建模块和子控制器即可：

var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {});
app.controller('SecondCtrl', function($scope) {});

为什么这样能解决问题？ #

因为我们提前在根作用域创建了data对象，控制器的作用域通过原型继承可以访问到这个唯一的对象。当我们修改data.message时，本质是在修改同一个对象的属性，而不是在各自作用域新建属性，所以所有绑定data.message的输入框和标题都会同步更新。

内容的提问来源于stack exchange，提问作者Shivam Sharma