角UI的引导模式没有回传结果 [英] angular-ui-bootstrap modal not passing back result

问题描述

我遇到了从角-UI-引导模态服务问题。
http://angular-ui.github.io/：我已经根据对例如设立模式引导/ 但我不能因此得到模态回来，如果我从模式的内容中删除列表项和一个文本区域和不同的NG-模型替换它们。我想设置一个的jsfiddle但我不知道如何以包括特定库（比如角UI自举）是必要的，以显示我想要什么。
我有我的模态的截图： http://d.pr/i/wT7G

下面是我的主控制器code，主视图，模态控制器和模态视图：

主视图code

 ＆LT;按钮式=按钮级=BTN BTN-成功NG点击=importSchedule（）＆GT;导入计划（JSON）LT; /按钮＆GT;
 

主控制器

  $ scope.importSchedule =功能（）{    VAR modalInstance = $ modal.open（{
        templateUrl：意见/ importmodal.html'，
        控制器：'ModalInstanceCtrl
    }）;    modalInstance.result.then（功能（结果）{
        的console.log（'结果：+结果）;
        // $ scope.schedule = angular.fromJson（scheduleJSON）;
    }，函数（）{
        console.info（'模态在驳回：+新的Date（））;
    }）;
};
 

模式视图

 ＆LT; D​​IV CLASS =模头＆GT;
  ＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;
  ＆LT; H4类=模式标题＆GT;进口进度（JSON）LT; / H4＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =模体＆GT;
  ＆LT; TextArea类=表格控行=15NG-模式=时间表＆GT;＆LT; / textarea的＆GT;
  ＆LT; pre＆GT;形式= {{时间表| JSON}}＆LT; / pre＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =模式躯＆GT;
  ＆LT;按钮类=BTN BTN-主要NG点击=OK（）＆GT;确定＆LT; /按钮＆GT;
  ＆LT;按钮类=BTN BTN-默认的NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

模式控制器

 使用严格的;angular.module（'VMP'）
    .controller（'ModalInstanceCtrl'，函数（$范围，$ modalInstance）{        $ scope.schedule ='';        $ scope.ok =功能（）{
            的console.log（'日程安排：'，$ scope.schedule）;
            $ modalInstance.close（$ scope.schedule）;
        };        $ scope.cancel =功能（）{
            $ modalInstance.dismiss（'取消'）;
        };    }）;
 

解决方案

什么的的console.log（）在 $ scope.ok 显示？如果它确实显示正确的价值，我会建议包装对象内的日程安排数据，以避免任何范围相关的问题：

  $ scope.schedule = {数据：''};
 

那么你的模式视图中：

 ＆LT; TextArea类=表格控行=15NG-模式=schedule.data＆GT;＆LT; / textarea的＆GT;
 

和您的输出：

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

这篇关于角UI的引导模式没有回传结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！