当前位置: 首页 > 面试题库 >

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

苏鸿志
2023-03-14
问题内容

我遇到了来自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');
        };

    });

问题答案:

是什么在console.log()里面$scope.ok演出?如果确实显示正确的值,我建议将时间表数据包装在一个对象中,以避免任何与范围相关的问题:

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

然后在您的模式视图中:

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

和您的输出:

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


 类似资料:
  • 问题内容: 我正在尝试将一些模型数据打开时传递给模式窗口。当用户单击某个元素时,我想打开模式窗口并显示与单击的内容有关的更详细的信息。 我创建了一个插件,该插件可以将数据传递到模态窗口中,但其工作方式与我想要的一样。 我正在尝试使用ng-click传递数据: 谁能帮我这个?或指出正确的方向? 问题答案: 怎么样这个? 我添加了解决方案 而在我做的:注射后

  • 问题内容: 亲爱的我是Angularjs的新手,我正在用Angular创建模式。我在网上发现的一个例子如下,我很难理解 我感到困惑的是我已经作为函数参数接收的cartObj通过依赖注入传递给我的控制器。但是,为什么我必须创建一个名为cartObj的函数并返回该变量。似乎令人困惑。谁能帮忙吗? 问题答案: 这是逐行细分: 正在创建一个名为checkout的$ scope变量,该变量引用一个函数,以便

  • 问题内容: 我目前正在机器上本地测试角度。当我尝试重新创建手风琴和对话框的示例时。我在控制台中收到此错误消息,提示模板丢失。 错误示例:404未找到-localhost / angular / template / message.html 当我查看指令时,有一个模板。 该指令的目的是什么? 下载整个有角度的zip文件时,这些模板是否应该包括在内? 我是否缺少应包含在标题中的其他文件? 问题答案:

  • 问题内容: 我正在使用角度UI引导程序弹出日期选择器来构建指令,该指令可以轻松地使我在需要的地方添加日期选择器。 当我将其与uiMask指令结合使用时,当我选择一个日期时,输入中的值会变得混乱。 这是我的html : 而我的JS : 我希望能够使用ui-mask功能,而不必键入s,从而使键入日期更容易。是否可以将它们一起使用? 问题答案: 以下代码段对我有用: 它只是用 jquery.masked

  • 问题内容: 我在很多方面都无法使用UI-Router。我不了解它如何与其他框架交互。 即,我正在尝试实现Bootstrap 3的导航栏折叠模块,如下所示: 这直接来自Bootstrap网站,在自己的.html页面中运行正常。 问题是当我将其插入UI-Router视图时。折叠动作不再起作用-我猜是因为“数据目标”功能以某种方式无法找到其目标。 如何将Bootstrap 3与Angular UI结合使

  • 问题内容: 这有点奇怪。当我在线搜索此问题时,我看到许多页面的Google搜索结果和SO解决方案…但是似乎没有任何效果! 简而言之,我正在尝试实现AngularUI Bootstrap Modal。我不断收到以下错误: 错误:[$ injector:unpr]未知提供程序:$ uibModalInstanceProvider <-$ uibModalInstance <-addEntryCtrl