我遇到了来自Angular-ui-bootstrap的模态服务的问题.
我根据以下示例设置了模态: http://angular-ui.github.io/bootstrap/但如果我从模态内容中删除列表项并将其替换为文本区域和不同的ng模型,则无法从模态返回结果.我会设置一个jsfiddle,但我不知道如何包含显示我想要的特定库(如angular-ui-bootstrap).
我有我的模态的截图: http://d.pr/i/wT7G.
原文链接:https://www.f2er.com/angularjs/142226.html我根据以下示例设置了模态: http://angular-ui.github.io/bootstrap/但如果我从模态内容中删除列表项并将其替换为文本区域和不同的ng模型,则无法从模态返回结果.我会设置一个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'); }; });