AngularJS注入错误-未知提供程序:modalMessagesProvider <-m​​odalMessages

时间:2019-01-17 08:47:12

标签: angularjs dependency-injection angular-ui-bootstrap

我有一个通过组件控制器打开angular-ui-bootstrap模态的服务。 但是我的控制器无法访问我要传递的参数(modalMessages,我只想打印它)。 错误是:错误:[$ injector:unpr]未知提供程序:modalMessagesProvider <-m​​odalMessages

有人可以帮忙吗?

服务:

angular.module('app').service('AlertService', function ($uibModal) {
    this.showModal = function (modalMessages) {
        return $uibModal.open({
            component: "modalComponent",
            resolve: {
                modalMessages: function () {
                    return modalMessages;
                }
            }
        }).result;
    }
});

组件控制器:

'use strict';

const Modal = {
    templateUrl: 'views/modals/modalAlert.html',
    controller: ['modalMessages', ModalCtrl],
    controllerAs: '$ctrl',
    bindings: {
        modalMessages: "<",
    }
}


angular.module('app').component('modalComponent', Modal);

function ModalCtrl() {

    this.modalMessages = modalMessages;
    console.log(this.modalMessages);
}

1 个答案:

答案 0 :(得分:2)

看看这个plunkr

请注意我所做的更改:

(function(){
  const Modal = {
    templateUrl: 'modalAlert.html',
    controller:  ModalCtrl,
    bindings: {
      resolve: "<"
    }
};

angular.module('app').component('modalComponent', Modal);

function ModalCtrl() {
  var $ctrl = this;
  $ctrl.$onInit = function() {
    $ctrl.modalMessages = $ctrl.resolve.modalMessages;
  }
}

})()

您需要将resolvebindings一起使用,以访问传递的参数。