Question

我有一个简单的例子，我将modal定义为组件，并使用uiModal.open打开该模态。但是，当我想使用open方法上的“resolve”和控制器构造函数上的参数将任何自定义数据传递给该模态时，数据不会传递。同时尝试注入$ uibModalInstance失败，出现错误未知提供者：$ uibModalInstanceProvider＆lt; - $ 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
}, () => {
});

Answer 1

我花了差不多三个小时来研究这个问题，我试图传递$ 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 bootstrap模式！：）

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

1 个答案: