angular-ui-bootstrap 模态不传回结果 [英] angular-ui-bootstrap modal not passing back result

问题描述

我遇到了来自 Angular-ui-bootstrap 的模态服务的问题.我已经根据以下示例设置了模式:http://angular-ui.github.io/bootstrap/ 但是如果我从模态内容中删除列表项并将它们替换为文本区域和不同的 ng-model，我无法从模态返回结果.我会设置一个 jsfiddle，但我不知道如何包含显示我想要的内容所必需的特定库(如 angular-ui-bootstrap).我确实有我的模态屏幕截图:http://d.pr/i/wT7G.p>

以下是我的主控制器、主视图、模态控制器和模态视图的代码:

主视图代码

<button type="button" class="btn btn-success" ng-click="importSchedule()">导入计划(JSON)</button>

主控制器

$scope.importSchedule = function() {var modalInstance = $modal.open({templateUrl: 'views/importmodal.html',控制器:'ModalInstanceCtrl'});modalInstance.result.then(函数(结果){console.log('结果:' + 结果);//$scope.schedule = angular.fromJson(scheduleJSON);}， 功能 () {console.info('模态解散于:' + new Date());});};

模态视图

<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">导入时间表(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="模态页脚"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-default" ng-click="cancel()">取消</button></div>

模态控制器

'使用严格';angular.module('VMP').controller('ModalInstanceCtrl', 函数 ($scope, $modalInstance) {$scope.schedule = '';$scope.ok = 函数 () {console.log('schedule: ', $scope.schedule);$modalInstance.close($scope.schedule);};$scope.cancel = 函数 () {$modalInstance.dismiss('取消');};});

解决方案

$scope.ok 中的console.log() 显示什么?如果它确实显示了正确的值，我建议将您的日程安排数据包装在一个对象中，以避免任何与范围相关的问题:

$scope.schedule = { data: '' };

然后在你的模态视图中:

<textarea class="form-control" rows="15" ng-model="schedule.data"></textarea>

你的输出:

$modalInstance.close($scope.schedule.data);

I am running into a problem with the modal service from Angular-ui-bootstrap. I have set up the modal according to the example on : http://angular-ui.github.io/bootstrap/ but i can not get a result back from the modal if i remove the list items from the modal content and replace them with a text area and a different ng-model. I would setup a jsfiddle but i do not know how to include specific libraries (like angular-ui-bootstrap) that are necessary to show what i want. I do have a screenshot of my modal : http://d.pr/i/wT7G.

Below is the code from my main controller, main view, modal controller and modal view:

main view code

<button type="button" class="btn btn-success" ng-click="importSchedule()">import schedule (JSON)</button>

main controller

$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());
    });
};

modal view

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>

modal controller

'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');
        };

    });

解决方案

What does the console.log() inside $scope.ok show? If it does indeed show the correct value, I would suggest wrapping your schedule data inside an object, to avoid any scope related issues:

$scope.schedule = { data: '' };

Then inside your modal view:

<textarea class="form-control" rows="15" ng-model="schedule.data"></textarea>

And your output:

$modalInstance.close($scope.schedule.data);

这篇关于angular-ui-bootstrap 模态不传回结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！