angular中 modal模態框(可複用)
阿新 • • 發佈:2018-12-23
可複用的 (普通的在function中找) : 點選事件之後的函式
$rootScope.confirm = function(content, okFn, cancelFn) { var modal = $modal({ html: true, show: false, templateUrl: 'views/template/ptteng-confirm-0.0.1.html', controller: function($scope) { $scope.content = content; $scope.ok = function() { typeofhtml:okFn == 'function' && okFn(); modal.$promise.then(modal.hide); }; $scope.cancel = function($scope) { typeof cancelFn == 'function' && cancelFn(); modal.$promise.then(modal.hide); }; } }); modal.$promise.then(modal.show); };
<td> <button class=ngjs:"btn btn-default btn-xs" ui-sref="field.moduleDetail({id: li.id})">編輯</button> <button class="btn btn-danger btn-xs" ng-click="vm.delete(li.id)">刪除</button> </td>
vm.delete = function(id) { $rootScope.confirm("您確定要刪除嗎?", function() { moduleService.deleteModule模態框html(id).then(function(res) { $state.go($state.current, {}, {reload: true}); }); }); };
<div class="modal ng-scope top am-fade" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title">提示</h3> </div> <div class="modal-body"> {{content}} </div> <div class="modal-footer"> <button class="btn btn-primary" type="button" ng-click="ok()">確定</button> <button class="btn btn-warning" type="button" ng-click="cancel()">取消</button> </div> </div> </div> </div>