使用ng-view时AngularJS数组未更新

Question

我正在学习如何使用ngRoute将html表单拆分为单独的视图。当我将数据添加到index.html中的主数组时，该数组正确更新，但是当我尝试通过ng-view添加的html表单中的相同方法时，该数组无法正确呈现。我可以调试并看到该数组正在添加新名称，但不会在html上呈现。

Index.html     

<h1> Names </h1>

<ul ng-repeat="name in names">
    <li>{{name.fname}}</li>
</ul>

<h1>Add name in index.html</h1>
<input type="text" ng-model="name" />
<button ng-click="addName(name)">add name</button>

<ul>
    <li><a href="#/first"> First</a></li>
    <li><a href="#/second"> Second</a></li>
</ul>

<div class="container">
    <div ng-view></div>
</div>

Apps.js

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {
$routeProvider
.when('/first', {
    templateUrl: 'pages/first.html',
    controller: 'mainController'
})

.when('/second', {
    templateUrl: 'pages/second.html',
    controller: 'mainController'
})

});

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.names = [{fname:'john',lname:'doe'},{fname:'jane',lname:'doe'}];

 $scope.addName = function(name){
    $scope.names.push({fname:name,lname:'no last name'});     
}
}]);

first和second.html相同

<h1>Add name in first.html</h1>
<input type="text" ng-model="name" />
<button ng-click="addName(name)">add name</button>

Answer 1

这是设计使然。

$scope限于控制器的范围，该范围是ng-view内部呈现的所有内容。这意味着有两个名为names的集合，一个在应用程序范围内，一个在控制器范围内。当您在控制器内部修改names集合时，它只会修改此集合，而不会修改应用程序根级别中引用的集合。 （我假设您将mainController绑定到body标签，否则index.html中的addName（）将不起作用。这本身不是一个好选择，您不应将另一个控制器实例放入自身，除非您完全知道自己在做什么。）

处理这种情况的正确方法是将names集合和addName（）函数放入您注入到控制器的服务中。