0
所以我有一个主控制器的一些数据(由$http.get
提取),当你点击一个项目,它弹出一个模式更多的细节。Angular:提交一个模式的帖子请求,并刷新主页
在我的模式中,有一个修改数据的按钮(由$http.post
发送),然后关闭模式并需要告诉父控制器刷新数据,因为它已被模态中的事件修改。
所以我有一个主控制器的一些数据(由$http.get
提取),当你点击一个项目,它弹出一个模式更多的细节。Angular:提交一个模式的帖子请求,并刷新主页
在我的模式中,有一个修改数据的按钮(由$http.post
发送),然后关闭模式并需要告诉父控制器刷新数据,因为它已被模态中的事件修改。
HTML
<!--MODAL WINDOW for item details -->
<script type="text/ng-template" id="itemModalContent.html">
<div class="modal-dialog ng-hide="hidden">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-close"></i></button>
<span class="item-name">{{item.name}}</span>
</div>
<div class="modal-body">
<p class="description">{{item.description}}</p>
<input type="hidden" ng-model="item.uniqueid" id="uniqueid" value="{{item.uniqueid}}" name="uniqueid"/>
<p class="response"> {{PostDataResponse}}</p>
<p class="error"> {{ResponseDetails}}</p>
</div>
<div class="modal-footer">
<button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
<button type="button" class="button ok btn-primary" ng-click="confirm()">Submit</button>
</div>
</div>
</div>
</script>
角
/* main controller - items */
myApp.controller('itemsCtrl', function ($scope, $rootScope, $http, $uibModal) {
//wrap $http.get request in a function
$scope.loadMyData = function() {
url = '<your_server>';
$http.get(url).then(function (response) {
$scope.items = response.data;
$scope.showModal = false;
$scope.open = function (item) {
$('.overlay').show();
var modalInstance = $uibModal.open({
controller: "itemsModalInstanceCtrl",
templateUrl: 'itemModalContent.html',
resolve: {
item: function() {
return item;
}
}
});
};
});
}
//initial load
$scope.loadMyData();
//event listener for refresh_items event
$rootScope.$on('refresh_items', function (event, data) {
console.log(data);
$scope.loadMyData();
});
});
/* modal instance - item */
myApp.controller('itemsModalInstanceCtrl', function ($http, $scope, $timeout, $uibModalInstance, item) {
$scope.item = item;
$scope.cancel = function() {
$uibModalInstance.dismiss();
$('.overlay').hide();
};
updateUrl = '<your_webservice_url>';
$scope.confirm = function() {
var myitemid = $scope.item.uniqueid;
// use $.param jQuery function to serialize data from JSON
var data = $.param({
uniqueid: myitemid
});
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post(updateUrl, data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = "You have successfully submitted your data";
})
.error(function (data, status, header, config) {
$('.response').addClass('error');
$scope.ResponseDetails = "data: " + data +
"<br />status: " + status +
"<br />headers: " + header +
"<br />config: " + config;
});
$timeout(function() {
$uibModalInstance.close({});
$('.overlay').hide();
//tell parent controller to refresh the data
$scope.$emit('refresh_items', data);
}, 3000);
}
});
如果你用我的解决方案
注意:代码是“原样”提供的,没有任何承诺可以达到目的,也不提供维护或支持承诺。 –
- 不要忘记角UI引导添加到您的主控制器如下:'VAR对myApp =角.module('myApp',['ui.bootstrap']);' –