加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – angular-ui-bootstrap模态不传回结果

发布时间:2020-12-17 07:30:48 所属栏目:安全 来源:网络整理
导读:我遇到了来自Angular-ui-bootstrap的模态服务的问题. 我根据以下示例设置了模态: http://angular-ui.github.io/bootstrap/但如果我从模态内容中删除列表项并将其替换为文本区域和不同的ng模型,则无法从模态返回结果.我会设置一个jsfiddle,但我不知道如何包
我遇到了来自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">&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>

模态控制器

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

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

然后在你的模态视图中:

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

而你的输出:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读