我遇到了来自Angular-ui-bootstrap的模式服务问题。我已经根据以下示例设置了模态: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'); }; });
是什么在console.log()里面$scope.ok演出?如果确实显示正确的值,我建议将时间表数据包装在一个对象中,以避免任何与范围相关的问题:
console.log()
$scope.ok
$scope.schedule = { data: '' };
然后在您的模式视图中:
<textarea class="form-control" rows="15" ng-model="schedule.data"></textarea>
和您的输出:
$modalInstance.close($scope.schedule.data);