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

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() 函数放入您注入控制器的服务中。

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

AngularJS array not updating when using ng-view

javascript

angularjs

ngroute