AngularJS模式不会将创建的值返回给数组
AngularJS模式不会将创建的值返回给数组
提问于 2015-10-30 01:58:02
我正在尝试打开一个模式窗口，创建一个新记录，并将该记录与数据库中的所有记录一起放到数组中。
下面是打开模式的链接：
<a href="" ng-click="openModalNew()">New Post (AngularJS)</a>在这里，模态窗口中的表单：
<form accept-charset="UTF-8" class="new_post ng-pristine ng-valid ng-binding" id="new_post">
<input data-ng-model="post.id" id="id" name="post[id]" type="hidden" class="ng-pristine ng-untouched ng-valid">
<div class="form-group ng-binding">
<label for="post_title">Title</label>
<input class="ng-pristine ng-valid ng-touched" id="post_title" name="post[title]" ng-model="post.title" type="text">
</div>
<div class="form-group">
<label for="post_body">Body</label>
<input class="ng-pristine ng-untouched ng-valid" id="post_body" name="post[body]" ng-model="post.body" type="text">
</div>
<div class="form-group">
<label for="post_starred">Starred</label>
<input id="post_starred" name="post[starred]" ng-model="post.starred" type="checkbox" value="1" class="ng-pristine ng-untouched ng-valid">
</div>
<div class="actions">
<button data-ng-click="saveForm(post)" id="btnsubmit">
<span class="ng-binding">Create</span>
</button>
</div>
</form>在这里，控制器：
app.factory('Posts', function($resource){
return $resource('/posts.json', {}, {
query: { method: 'GET', isArray: true },
create: { method: 'POST' },
save: { method: 'POST' } // testing this
})
});
app.factory('Post', function($resource) {
return $resource("/posts/:id.json", { id: '@id' }, {
'create': { method: 'POST' },
'index': { method: 'GET', isArray: true, responseType: 'json' },
'update': { method: 'PUT' },
});
});
app.controller("PostsCtrl", ['$scope', '$http', '$resource', 'Posts', 'Post', '$location', '$modal', '$timeout', function($scope, $http, $resource, Posts, Post, $location, $modal, $timeout) {
$scope.loading = true;
$scope.posts = Posts.query(function () {
$scope.loading = false;
});
$scope.openModal = function() {
$scope.$modalInstance = $modal.open({
templateUrl: 'angularjs/templates/testtt.html',
controller: 'PostsCtrl',
scope: $scope
});
};
$scope.cancel = function() {
$scope.$modalInstance.dismiss('cancel');
};
$scope.openModalNew = function(post) {
if(post) {
$scope.headline = 'Edit Post';
$scope.post = post; // load values from database
$scope.post.id = post._id.$oid;
$scope.btn_text = 'Update Post';
$scope.$modalInstance = $modal.open({
templateUrl: 'angularjs/templates/new_post.html',
controller: 'PostsCtrl',
scope: $scope
});
} else {
$scope.headline = 'Create New Post';
$scope.post = {}; // set all inputs/vaues on default
$scope.btn_text = 'Create New Post';
$scope.$modalInstance = $modal.open({
templateUrl: 'angularjs/templates/new_post.html',
controller: 'PostsCtrl',
scope: $scope
});
}
}
$scope.saving = false;
$scope.saveForm = function(post) {
$scope.saving = true;
$scope.btn_text = "Processing...";
if (!post.id) { // new record
var p = new Post(post);
p.$save().then(function(response){
//$scope.posts.push(angular.extend(p, {_id: response.id.$oid}));
$scope.posts.push(response); // this works
$scope.btn_text = "Done!"
$timeout(function() {
$scope.$modalInstance.dismiss('cancel');
}, 500);
});
} else { // edit of existing record
Post.update({ id: post.id,
title: post.title,
body: post.body,
starred: post.starred }).$promise.then(function () {
$scope.btn_text = "Done!"
$timeout(function() {
$scope.$modalInstance.dismiss('cancel');
}, 500);
});
}
};
...意见如下：
<table class="table table-striped">
<tr>
<th>Title</th>
<th>Body</th>
<th>Starred</th>
<th>Comments</th>
<th></th>
<th></th>
<th></th>
</tr>
<tr ng-repeat="post in posts">
...问题是，当我单击 not 链接时，将出现模式窗口，输入并提交信息--记录是在数据库中创建的，模态消失了(这很好)，但是没有更新带有posts的表--没有添加这个新记录。
为什么会这样呢？调用模态窗口的过程是否错误？我是否需要在某个地方添加resolve部件(我是AngularJS新手)？还是在模态窗口中不正确地使用$scope？
我将非常感谢任何帮助，不能使这项工作。
非常感谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-30 04:23:56
我相信您必须通过模式关闭事件函数将位于作用域上的新数组传递回。
$scope.$modalInstance.close($scope.posts);来自角度ui文档：
close(result) - a method that can be used to close a modal, passing a result
dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
The event itself includes a parameter for the result/reason and a boolean parameter that indicates whether the modal is being closed (true) or dismissed.页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33427606
复制相关文章
相似问题
腾讯云开发者
