为什么伍重复不工作，如果按钮可以从不同的形式引用？ [英] why Ng Repeat is not working if button invoked from a different form?
问题描述
我有一个包含NG重复指令和两个button.The第一个将打开包含新形式的模式，让我创造我的用户，然后当我点击保存，将其添加到列表中的HTML表格。第二个是在相同的原始形式，做添加用户。
我不明白为什么当我的第一个按钮是在一个不同的形式按我却无法为第二个有可能更新NG重复。
这是code：
homepage.jsp
＆LT;机身NG-应用=对myApp＆GT;
＆LT; DIV CLASS =通用容器NG控制器=UserController中为CTRL＆GT;
＆LT; DIV ID =createUserContent.jspNG-包括=createUserContent＆GT;＆LT; / DIV＆GT;
＆LT;表＆gt;
＆所述; TR＆GT;
＆所述; TD＆GT;
＆LT;按钮式=按钮级=BTN BTN-主要
NG-点击=ctrl.openCreateUser（）＆GT;创建＆LT; /按钮＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;表类=表的表悬停＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
百分位方式＆gt;＆ID LT; /第i
＆LT;第i个姓名和LT; /第i
百分位＆gt;地址＆LT; /第i
＆LT;第i个电子邮件和LT; /第i
百分位宽度=20％＆GT;＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复=U在ctrl.users＆GT;
＆LT; TD＆GT;＆LT;跨度NG绑定=u.ssoId＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;跨度NG绑定=u.firstName＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;跨度NG绑定=u.lastName＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;跨度NG绑定=u.email＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; / DIV＆GT;
＆LT; /身体GT;
user_controller.js
使用严格的;App.controller（'UserController的'，函数（$范围，UserService，$窗口，$日志$ uibModalStack，
$ uibModal，$ rootScope）{
VAR自我=这一点; self.users = []; self.fetchAllUsers =功能（）{
的console.log（'----------开始打印用户----------'）;
对于（VAR I = 0; I＆LT; self.users.length;我++）{
的console.log（'姓'+ self.users [I] .firstName）;
}
};
/ **
这个功能将无法正常工作
** /
self.saveUser =功能（用户）{
self.users.push（用户）;
self.fetchAllUsers（）;
$ log.log（保存用户）;
$ uibModalStack.dismissAll（）;
}; / **
此功能工作正常
** /
self.addNewRow =功能（）{
VAR specialUser = {
标识：12，
姓：'约翰'，
名字：'屈伏塔，
是homeAddress：{位置：芝加哥}，
电子邮件：trav@email.com
};
self.users.push（specialUser）;
（节约specialUser）$ log.log;
};
self.openCreateUser =功能（）{ VAR modalInstance = $ uibModal.open（{
动画：真实，
templateUrl：createUserContent'，
控制器：'UserController的，
解析：{
项目：功能（）{
返回$ scope.items;
}
}
}）; modalInstance.result.then（功能（将selectedItem）{
$ scope.selected = selectedItem属性;
}，函数（）{
$ log.info（'模态在驳回：+新的Date（））;
}）;
};
self.fetchAllUsers（）;
}）;
createUserContent.jsp
＆LT;形式的作用=形式NG-控制器=UserController中为CTRL＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=名字＆GT;＆名字LT; /标签＆gt; ＆LT;输入类型=姓
NG-模式=ctrl.user.firstName级=表格控
ID =姓占位符=输入名字/＆GT; ＆LT;标签
对于=姓氏＆GT; lastName的＆LT; /标签＆gt; ＆LT;输入类型=姓氏
类=表格控ID =姓氏
NG-模式=ctrl.user.lastName占位符=输入姓氏/＆GT;
＆LT;标签=电子邮件＆GT;邮箱地址：LT; /标签＆gt; ＆LT;输入类型=电子邮件
NG-模式=ctrl.user.email级=表格控ID =电子邮件
占位=输入电子邮件/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=homeAddressLocation＆GT;归属地址LT; /标签＆gt; ＆LT;输入类=表格控
NG-模式=ctrl.user.homeAddress.locationID =homeAddressLocation
占位=homeAddressLocation/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=SSOId＆GT; SSOId＆LT; /标签＆gt; ＆LT;输入类=表格控
NG-模式=ctrl.user.ssoIdID =SSOId占位符=SSOId/＆GT;
＆LT; / DIV＆GT;
＆LT;按钮式=提交级=BTN BTN-默认
NG-点击=ctrl.saveUser（ctrl.user）＆GT;保存＆LT; /按钮＆GT;
＆LT;按钮式=提交级=BTN BTN-默认＆GT;取消＆LT; /按钮＆GT;
＆LT; /表及GT;
UserController的对象的和不显示错误，因为你在模式模板中使用相同的 controlle 研究，以便重新加载新的控制并非指父控制。
不过最好使用不同的控制器的，并通过父母的控制器的对象模式的控制器的再模态的身体可以使用所有的父对象。所以你应该通过父对象到模式的控制器的
在包括 createUserContent.jsp 弹出文件在你的主文件，那么没有必要使用 NG-控制器=UserController中为CTRL在你的模式模板你modalInstance使用控制器：按下Ctrl，
这样的：
VAR modalInstance = $ uibModal.open（{
templateUrl：createUserContent.jsp'，
控制器：'ModalCtrl'，// ModalCtrl模态
controllerAs：'模式'，//莫代尔因此没有必要在模式模板中使用
大小：LG，
解析：{
项目：功能（）{
返回$ scope.items;
}，
家长：函数（）{//通过自我对象作为父ModalCtrl
返回自我;
}
}
和 ModalCtrl 这样的：
.controller（'ModalCtrl'，['父'，函数（父）{
this.parent =父母;
}]）;
这里使用 ModalCtrl 模态为模式这样你就可以访问父对象，如： modal.parent.user
模板，如：
＆LT;形式的作用=形式＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签=名字＆GT;＆名字LT; /标签＆gt; ＆LT;输入类型=姓
NG-模式=modal.parent.user.firstName级=表格控
ID =姓占位符=输入名字/＆GT;
.....
....
＆LT;按钮式=提交级=BTN BTN-默认
NG-点击=modal.parent.saveUser（modal.parent.user）＆GT;保存＆LT; /按钮＆GT;
＆LT;按钮式=提交级=BTN BTN-默认＆GT;取消＆LT; /按钮＆GT;
＆LT; /表及GT;
更多细节访问PLUNKER演示
I have a html table that contains an ng repeat directive and two button.The first one will open a modal that contains a new form and let me create my user and then when i click save it will add it to the list.The second one is in the same original form and do the add a user.
What i did not understand why when i click on the first button which is in a different form i can not update the ng repeat however for the second one it's possible. This is the code:
homepage.jsp
<body ng-app="myApp">
<div class="generic-container" ng-controller="UserController as ctrl">
<div id="createUserContent.jsp" ng-include="createUserContent"></div>
<table>
<tr>
<td>
<button type="button" class="btn btn-primary"
ng-click="ctrl.openCreateUser()">Create</button>
</td>
</tr>
</table>
<table class="table table-hover">
<thead>
<tr>
<th>ID.</th>
<th>Name</th>
<th>Address</th>
<th>Email</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="u in ctrl.users">
<td><span ng-bind="u.ssoId"></span></td>
<td><span ng-bind="u.firstName"></span></td>
<td><span ng-bind="u.lastName"></span></td>
<td><span ng-bind="u.email"></span></td>
</tr>
</tbody>
</table>
</div>
</body>
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 : 'trav@email.com'
};
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
<form role="form" ng-controller="UserController as ctrl" >
<div class="form-group">
<label for="FirstName">FirstName</label> <input type="FirstName"
ng-model="ctrl.user.firstName" class="form-control"
id="FirstName" placeholder="Enter FirstName" /> <label
for="lastName">lastName</label> <input type="lastName"
class="form-control" id="lastName"
ng-model="ctrl.user.lastName" placeholder="Enter lastName" />
<label for="email">Email address</label> <input type="email"
ng-model="ctrl.user.email" class="form-control" id="email"
placeholder="Enter email" />
</div>
<div class="form-group">
<label for="homeAddressLocation">Home Address</label> <input class="form-control"
ng-model="ctrl.user.homeAddress.location" id="homeAddressLocation"
placeholder="homeAddressLocation" />
</div>
<div class="form-group">
<label for="SSOId">SSOId</label> <input class="form-control"
ng-model="ctrl.user.ssoId" id="SSOId" placeholder="SSOId" />
</div>
<button type="submit" class="btn btn-default"
ng-click="ctrl.saveUser(ctrl.user)">Save</button>
<button type="submit" class="btn btn-default">Cancel</button>
</form>
Because of your modal template can't access your UserController object and doesn't show error because you used in modal template same controller so reloaded as new Ctrl doesn't refer parent Ctrl.
However better to use different controller and pass parent controller object to modal controller and then modal body can use all parent object. so you should pass parent object to modal controller.
When you include createUserContent.jsp popup file in your main file then no need to use ng-controller="UserController as ctrl" in your modal template you used in modalInstance controller : 'Ctrl',
like:
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;
}
}
and ModalCtrl like:
.controller('ModalCtrl', ['parent', function (parent) {
this.parent = parent;
}]);
here used ModalCtrl for modal as modal so you can access parent object like: modal.parent.user
template like:
<form role="form" >
<div class="form-group">
<label for="FirstName">FirstName</label> <input type="FirstName"
ng-model="modal.parent.user.firstName" class="form-control"
id="FirstName" placeholder="Enter FirstName" />
.....
....
<button type="submit" class="btn btn-default"
ng-click="modal.parent.saveUser(modal.parent.user)">Save</button>
<button type="submit" class="btn btn-default">Cancel</button>
</form>
More details Visit PLUNKER DEMO
这篇关于为什么伍重复不工作，如果按钮可以从不同的形式引用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
