如果从不同的表单调用按钮，为什么Ng Repeat不起作用？

我有一个包含ng repeat指令和两个按钮的html表。第一个将打开一个包含新表单的模式，让我创建我的用户，然后当我点击保存时，它会将它添加到列表中。第二个是相同的原始forms，并添加用户。

我不明白为什么当我点击不同forms的第一个按钮时，我无法更新ng重复，但是对于第二个按钮，它是可能的。 这是代码：

homepage.jsp

 
 
 
 
 
 Create 
 
 
 
 
 
 
ID.
 
Name
 
Address
 
Email
 
 
 
 
 
 
 
 
 
 
 
 
 
  

user_controller.js

 'use strict'; App.controller('UserController', function ($scope, UserService, $window, $log, $uibModalStack, $uibModal, $rootScope) { var self = this; self.users = []; self.fetchAllUsers = function () { console.log('----------Start Printing users----------'); for (var i = 0; i < self.users.length; i++) { console.log('FirstName ' + self.users[i].firstName); } }; /** this function will not work **/ self.saveUser = function (user) { self.users.push(user); self.fetchAllUsers(); $log.log("saving user"); $uibModalStack.dismissAll(); }; /** this function works fine **/ self.addNewRow = function () { var specialUser = { id : 12, firstName : 'john', lastName: 'travolta', homeAddress : {location:'chicago'}, email : '[e-mail]' }; self.users.push(specialUser); $log.log("saving specialUser"); }; self.openCreateUser = function () { var modalInstance = $uibModal.open({ animation : true, templateUrl : 'createUserContent', controller : 'UserController', resolve : { items : function () { return $scope.items; } } }); modalInstance.result.then(function (selectedItem) { $scope.selected = selectedItem; }, function () { $log.info('Modal dismissed at: ' + new Date()); }); }; self.fetchAllUsers(); }); 

createUserContent.jsp

 
 
 FirstName  lastName  Email address  
 
 Home Address  
 
 SSOId  
 Save Cancel  

Answer 1

由于您的模态模板无法访问您的UserController对象并且不显示错误，因为您在模态模板中使用相同的UserController ，因此重新加载，因为新的Ctrl不会引用父Ctrl 。

但是更好地使用不同的控制器并将父控制器对象传递给模态控制器然后模态体可以使用所有父对象。 所以你应该将父对象传递给模态控制器 。

当您在主文件中包含createUserContent.jsp弹出文件时，无需在modalInstance controller : 'Ctrl',使用的模态模板中使用ng-controller="UserController as ctrl" controller : 'Ctrl',

喜欢：

 var modalInstance = $uibModal.open({ templateUrl: 'createUserContent.jsp', controller: 'ModalCtrl', // ModalCtrl for modal controllerAs:'modal', // as modal so no need to use in modal template size: 'lg', resolve: { items: function () { return $scope.items; }, parent: function(){ // pass self object as a parent to 'ModalCtrl' return self; } } 

和ModalCtrl一样：

 .controller('ModalCtrl', ['parent', function (parent) { this.parent = parent; }]); 

这里使用ModalCtrl作为modal因此您可以访问父对象，如： modal.parent.user

模板如：

 
 
 FirstName  ..... .... Save Cancel  

更多细节参观PLUNKER DEMO