Javascript Angularjs-为什么我可以从不同的视图更新对象，但不能更新列表（ng repeat）？

通过控制台，客户对象似乎已更新，但列表（ng repeat）未更新，我该怎么办。如果我在page.htm中实现了这个函数和view2.htm的html，它就会工作

HTML“page.htm”

---

尝试将此.apply（）添加到addNewCustomer方法…

尝试类似的操作。我重新设计了控制器，以便addNewCustomer函数位于同一控制器内

var demoApp = angular.module("demoApp", ["ngRoute"]);

demoApp.controller("simpleController" function($scope) {

  $scope.customers = [
    {name : "Fulvio", city:"London" },
    {name : "Elisa", city:"Catanzaro" },
    {name : "Immacolata", city:"Catanzaro"},
    {name : "Vitaliano", city:"Roma"},
    {name : "Ivan", city:"Milano"}
 ];

 // You can do two things here, either pass in the customer object, 
 // OR bind to $scope.customer on your model

 $scope.addNewCustomer = function(customer){
   $scope.customers.push(customer);
 };

});


demoApp.config(function($routeProvider){

$routeProvider.
    when("/",{
        controller: simpleController,
        templateUrl: "view2.htm",
    }).
    when("/second",{
        controller: simpleController,
        templateUrl: "view2.htm"
    }).
    when("/third",{
        controller: simpleController,
        templateUrl: "view3.htm"
    }).
    otherwise({redirectTo: "/"});

});

**观点

page.html

<!-- not sure what this input is for -->
<input ng-model="customer" type="text">

<ul>
  <li ng-repeat="cust in customers | filter:cust ">
    {{cust.name}} - {{cust.city}}
  </li>
</ul>

<label for="_newname">Customer name:</label>
<input name="_newname" ng-model="_newname" type="text">

{{cust.name}-{{cust.city}


客户名称：

view2.html

<label for="newname" >Customer name:</label>

<input name="newname" ng-model="customer.name" type="text">

<label for="newcity">Customer city:</label>

<input name="newcity" ng-model="customer.city" type="text">

<button ng-click="addNewCustomer(customer)" >Add Customer</button>

客户名称：
客户城市：
添加客户

与单例服务不同，控制器每次都是新创建的

创建具有作用域的控制器，该作用域由

ng repeat

指令使用

当（“/”，{controller:simpleController，

创建另一个控制器，该控制器具有自己的作用域和自己的

列表，您在单击按钮时将添加到该列表中。该列表与父控制器中的列表不同

var demoApp = angular.module("demoApp", ["ngRoute"]);

demoApp.controller("simpleController" function($scope) {

  $scope.customers = [
    {name : "Fulvio", city:"London" },
    {name : "Elisa", city:"Catanzaro" },
    {name : "Immacolata", city:"Catanzaro"},
    {name : "Vitaliano", city:"Roma"},
    {name : "Ivan", city:"Milano"}
 ];

 // You can do two things here, either pass in the customer object, 
 // OR bind to $scope.customer on your model

 $scope.addNewCustomer = function(customer){
   $scope.customers.push(customer);
 };

});


demoApp.config(function($routeProvider){

$routeProvider.
    when("/",{
        controller: simpleController,
        templateUrl: "view2.htm",
    }).
    when("/second",{
        controller: simpleController,
        templateUrl: "view2.htm"
    }).
    when("/third",{
        controller: simpleController,
        templateUrl: "view3.htm"
    }).
    otherwise({redirectTo: "/"});

});

我假设您只想使用一个

simpleController

，所以不要在路由定义中添加一个

    $routeProvider.
    when("/",{
        // controller: simpleController, <- don't do this
        templateUrl: "view2.htm",
    }).

---

我使用$rootScope解决了这个问题 Html

---

您可能应该在两者之间广播。另外，在控制器中的$scope上定义addNewCustomer。控制器对于所有视图都是相同的。每个视图的作用域都不同。您需要将数据从一个视图广播到另一个视图。好的，我用$RootScope解决了。是的，您的视图没有设置为与我发布的代码一起工作。请给我一点时间将视图添加到我的答案中。@Donovant抱歉，我认为我已经说得很清楚了。我添加了一些代码。@Donovant应该这样做。用你的代码设置一个提琴或plunkr或其他东西，我会看一看。应该这样做，但不应该。如果你断言它有效，你就必须在imo中设置一个提琴。@Donovant很公平：。它有效，但我想你是指另一个问题：

ng model

仍在子作用域中。很抱歉，我没有看到您创建了另一个控制器…但如果不创建另一个控制器，我必须使用$rootScope。

<label for="newname" >Customer name:</label>

<input name="newname" ng-model="customer.name" type="text">

<label for="newcity">Customer city:</label>

<input name="newcity" ng-model="customer.city" type="text">

<button ng-click="addNewCustomer(customer)" >Add Customer</button>

    $routeProvider.
    when("/",{
        // controller: simpleController, <- don't do this
        templateUrl: "view2.htm",
    }).

demoApp.controller('viewController', function($scope) {
  $scope.addNewCustomer = function(){
    $scope.customers.push({name:$scope.newname, city:$scope.newcity});
  }  
})

when("/",{
  controller: viewController,
  templateUrl: "view2.htm",
 }).

<button ng-click="$broadcast('addNewCustomer')" >Add Customer</button>

function simpleController($rootScope, $scope){

   $rootScope.customers = [
               {name : "Fulvio", city:"London" },
               {name : "Elisa", city:"Catanzaro" },
               {name : "Immacolata", city:"Catanzaro"},
               {name : "Vitaliano", city:"Roma"},
               {name : "Ivan", city:"Milano"}
   ];


   $scope.$on("addNewCustomer", function(){
        $scope.customers.push({name: $scope.newname, city: $scope.newcity});
        console.log( $rootScope.customers );
   });

}