首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >angular-ui-bootstrap模式不返回结果

angular-ui-bootstrap模式不返回结果
EN

Stack Overflow用户
提问于 2014-02-11 09:08:40
回答 1查看 31K关注 0票数 9

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

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

主视图代码

代码语言:javascript
复制
<button type="button" class="btn btn-success" ng-click="importSchedule()">import schedule (JSON)</button>

主控制器

代码语言:javascript
复制
$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());
    });
};

模式视图

代码语言:javascript
复制
<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>

模态控制器

代码语言:javascript
复制
'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');
        };

    });
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-02-11 09:44:50

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

代码语言:javascript
复制
$scope.schedule = { data: '' };

然后在你的模式视图中:

代码语言:javascript
复制
<textarea class="form-control" rows="15" ng-model="schedule.data"></textarea>

和你的输出:

代码语言:javascript
复制
$modalInstance.close($scope.schedule.data);
票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21691120

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档