繁体   English   中英

如何使用组件从Angular UI Bootstrap Modal传递参数并检索结果

[英]How to pass arguments and retrieve results from Angular UI Bootstrap Modal using Components

我有一个简单的例子,我将模态定义为组件,并使用uiModal.open打开该模态。 但是,当我想在open方法上使用“ resolve”并在控制器构造函数上使用参数将任何自定义数据传递给该模式时,不会传递数据。 另外尝试注入$ uibModalInstance失败,并显示错误未知提供程序:$ uibModalInstanceProvider <-$ uibModalInstance,因此在关闭模式时无法返回结果。

模板:

   <div class="modal-header">
    <h3 class="modal-title" id="modal-title">Modal</h3>
</div>
<div class="modal-body" id="modal-body">
    Some text
        <div class="row">
            <div class="col-sm-10">
                    <textarea class="form-control" name="closureNotes" rows="6" data-ng-model="vm.closureNote" required>
                    </textarea>
            </div>
        </div>

</div>

<div class="modal-footer">
    <button class="btn btn-default btn-close" type="submit" ng-click="vm.ok()">Close Exception Request</button>
    <button class="btn btn-danger" type="button" ng-click="vm.cancel()">Cancel</button>
</div>

零件:

import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';

let closeExceptionModalComponent = {
  restrict: 'E',
  bindings: {
        resolve: '<',
    close: '&',
    dismiss: '&'
    },
  template,
  controller,
    controllerAs: 'vm'
};

export default closeExceptionModalComponent;

控制器:

class CloseExceptionModalController {

  constructor() {
         //I need to retrieve here some data from caller
    }

    ok() {
        this.close(); //I need to pass here result to caller using modalInstance.close
    }

    cancel() {
        this.dismiss();
    }
}

export default CloseExceptionModalController;

呼叫者控制器代码:

//I need to pass some data to modal
let modalInstance = this.$uibModal.open({
    animation: true,
    component: 'closeExceptionModal',
    appendTo: angular.element(document.body),
})

modalInstance.result.then( (result) => {
    alert(result); //this must be result data from modal
}, () => {
});

我花了将近三个小时来研究该问题,尝试传递$ modalInstance,$ uibModalInstance等。我尝试了解析和构造函数参数,我在stackoverflow上搜索了很多线程,但都没有运气,建议升级ui.bootstrap,angularjs等..

核心问题是,我尝试以不同的方式执行的操作是使用组件定义模态,而不是内联定义“调用方”控制器代码中的控制器和指示的模板。

最后,借助从许多线程中获得的一些局部知识,我得到了这个奇妙而简单的解决方案。

要将任何数据传递给基于组件的modal和modalInstance,我们要做的就是更新组件定义绑定部分:

import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';

let closeExceptionModalComponent = {
  restrict: 'E',
  bindings: {
        resolve: '<', //this let us pass any data from caller constructor
    modalInstance: '<', //modalInstance will be auto injected
    close: '&',
    dismiss: '&'
    },
  template,
  controller,
    controllerAs: 'vm'
};

export default closeExceptionModalComponent;

模态的调用应如下所示:

let modalInstance = this.$uibModal.open({
    animation: true,
    component: 'closeExceptionModal',
    appendTo: angular.element(document.body),
    resolve: {
        modalData: function() {
            return "test";
        }
    }
})

modalInstance.result.then( (result) => {
    alert(result);
}, () => {
});

我的最终模态控制器如下所示:

class CloseExceptionModalController {

  constructor() {
        this.$ctrl = this; //we store the controller instance

        console.log(this.$ctrl.resolve.modalData); //here is my input data
    }

    ok() {
        //modal instance is auto injected and we can call close passing result
        this.$ctrl.modalInstance.close(this.closureNote);
    }

    cancel() {
        this.dismiss();
    }
}

export default CloseExceptionModalController;

我希望这会帮助其他尝试使用组件和传递/返回数据执行ui引导模态的人! :)

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM