javascript - 使用 ng-view 时 AngularJS 数组不更新

Question

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

索引.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 和 secondary.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 仅限于 Controller 的范围，即 ng-view 内渲染的所有内容。这意味着有两个名为 names 的集合，一个在应用程序范围内，一个在 Controller 范围内。当您修改 Controller 内的 names 集合时，它只会修改此集合，而不是应用程序根级别中引用的集合。 (我假设您将 mainController 绑定(bind)到 body 标记，否则 index.html 中的 addName() 将无法工作。这本身并不是一个很好的选择，您不应该放置另一个 Controller 实例除非你绝对知道自己在做什么。)

处理这种情况的正确方法是将 names 集合和 addName() 函数放入注入(inject) Controller 的服务中。