我遇到了 Angular-ui-bootstrap 模式服务的问题。
我已经根据示例设置了模式:http://angular-ui.github.io/bootstrap/但如果我从模态内容中删除列表项并将其替换为文本区域和不同的 ng-model,我将无法从模态中返回结果。我会设置一个 jsfiddle,但我不知道如何包含显示我想要的内容所必需的特定库(如 angular-ui-bootstrap)。
我有我的模式的屏幕截图:http://d.pr/i/wT7G.
下面是我的主控制器、主视图、模态控制器和模态视图的代码:
主视图代码
<button type="button" class="btn btn-success" ng-click="importSchedule()">import schedule (JSON)</button>
主控制器
$scope.importSchedule = function() {
var modalInstance = $modal.open({
templateUrl: 'views/importmodal.html',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function (result) {
console.log('result: ' + result);
// $scope.schedule = angular.fromJson(scheduleJSON);
}, function () {
console.info('Modal dismissed at: ' + new Date());
});
};
模态视图
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Import schedule(JSON)</h4>
</div>
<div class="modal-body">
<textarea class="form-control" rows="15" ng-model="schedule"></textarea>
<pre>form = {{schedule | json}}</pre>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
模态控制器
'use strict';
angular.module('VMP')
.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
$scope.schedule = '';
$scope.ok = function () {
console.log('schedule: ', $scope.schedule);
$modalInstance.close($scope.schedule);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});