Question

通过控制台，客户对象似乎已更新，但列表（ng-repeat）没有，我能做什么。如果我在page.htm中实现这个函数和view2.htm的html它就可以了。

HTML“page.htm”

    <body ng-controller="simpleController">

<div ng-view></div>

<input ng-model="cust" 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" />

HTML“view2.htm”

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

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

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

Jvascript

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

demoApp.controller("simpleController", simpleController);

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

    $scope.addNewCustomer = addNewCustomer.bind($scope);
}


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: "/"});

});

var addNewCustomer = function(){
    this.customers.push({name:this.newname, city:this.newcity});
}

Answer 1

与作为单身人士的服务不同，控制器每次都是新创建的。

<body ng-controller="simpleController">创建一个带有范围的控制器，由ng-repeat指令使用。

when("/",{controller: simpleController,创建另一个具有自己范围的控制器和自己的 customers列表，您在单击按钮时添加该列表。它与父控制器中的列表不同。

我假设您只想使用一个simpleController，因此请勿在路由定义中添加一个。

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

但是您还需要注意一些事项：您定义自己的方式ng-model会将其粘贴到视图的范围内。 imho最干净的方法是为每个视图编写一个单独的控制器，它只处理视图。这就是它的意义，因为addNewCustomer仅与该视图相关。

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

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

Answer 2

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

Answer 3

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

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

的Javascript

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 );
   });

}

Answer 4

尝试这样的事情。我重新设计了控制器，以便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">

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>

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

4 个答案: