0

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

1 回答 1

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;

modal 的调用应该是这样的：

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 引导模式的人！:)

于 2017-04-21T14:06:20.117 回答