Массив AngularJS не обновляется при использовании ng-view - PullRequest
Новая
       10

Массив AngularJS не обновляется при использовании ng-view

0 голосов
/ 20 января 2019

Я учусь использовать ngRoute для разделения моих HTML-форм на отдельные представления. Когда я добавляю данные в основной массив в index.html, массив обновляется корректно, но когда я пытаюсь использовать тот же подход в HTML-формах, которые добавляются через ng-представление, массив не отображается правильно. Я могу отладить и увидеть, что массив получает новое имя, добавленное, но он не будет отображаться в 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>

enter image description here

1 Ответ

0 голосов
/ 20 января 2019

Это специально.

$scope ограничено областью действия контроллера, которая представляет собой все, что отображается внутри ng-view.Это означает, что есть две коллекции с именем names, одна в области приложения и одна в области контроллера.Когда вы изменяете коллекцию names внутри контроллера, она изменяет только эту коллекцию, а не ту, на которую ссылается корневой уровень приложения.(Я предполагаю, что вы привязываете mainController к тегу body, иначе addName () в index.html не будет работать. Сам по себе это не лучший выбор, вам не следует помещать в себя другой экземпляр контроллера, если только выточно знаю, что вы делаете.)

Правильный способ справиться с этой ситуацией - поместить коллекцию names и функцию addName () в сервис, который вы внедряете в свои контроллеры.

...