当动态插入元素时，AngularJS ng-repeat不更新DOM节点

Question

ng-repeat当我们在不同区域使用相同的控制器名称时，不会更新DOM节点。

<div ng-controller="customer"> 
    <div ng-repeat="number in numberArray"> 
     {{number}}          
    </div> 
</div> 

<div ng-controller="customer"> 
    <div ng-repeat="number in numberArray"> 
     {{number}}          
    </div> 
    <input type="text" ng-model="ncDialText"/> 
    <button ng-click="add()"/> 
</div> 

myApp.controller('customer',function($scope, $http) { 
     $scope.numberArray =[]; 
     $scope.add = function() { 
      $scope.numberArray.push($scope.ncDialText); 
     }  
}); 

Answer 1

问题是，ng控制器创建每个控制器的新实例，因此范围在两个ng-repeat指令中不同。要解决这个问题

一种方法是有一个控制器，它涵盖了NG-重复

<div ng-app="myApp" ng-controller="customer"> 
    <div > 
     <div ng-repeat="number in numberArray"> 
      {{number}}          
     </div> 
    </div> 

    <div > 
     <div ng-repeat="number in numberArray"> 
      {{number}}          
     </div> 
     <input type="text" ng-model="ncDialText"/> 
     <button ng-click="add()">Add</button> 
    </div> 
</div> 

另一种选择是使用服务来存储数据这样JSFiddle

的Javascript：

var myApp = angular.module('myApp', []); 
myApp.factory('customerService', function() { 

    var _self = this; 

    _self.numberArray = []; 

    return { 
     numberArray: _self.numberArray 
    } 
}); 

myApp.controller('customer',function($scope, $http, customerService) { 
     $scope.numberArray = customerService.numberArray; 
     $scope.add = function() { 
      customerService.numberArray.push($scope.ncDialText); 
     }  
}); 

HTML：

<div ng-app="myApp"> 
    <div ng-controller="customer"> 
     <div ng-repeat="number in numberArray"> 
      {{number}}          
     </div> 
    </div> 

    <div ng-controller="customer"> 
     <div ng-repeat="number in numberArray"> 
      {{number}}          
     </div> 
     <input type="text" ng-model="ncDialText"/> 
     <button ng-click="add()">Add</button> 
    </div> 
</div>