Pass variable to modal which is the component

Question

I would like to pass data to modal, without pass all $scope. My modal is in component.

angular.module('app').component('testModal', {
  templateUrl: '/test-modal',
  bindings: {
    close: '&',
    dismiss: '&',
    resolve: '<'
  },


  controller: function ($scope, test) {
    var vm = this;
    this.test = test;

    this.save = () => {
      this.close()
    }

    this.cancel = function () {
      this.dismiss()
    }
  }
})

I try to pass data like below (from another controller)

function openModal() {
            testService.getTest().then(function(data) {
                var modalInstance = $uibModal.open({
                    component: 'testModal',
                    size: 'lg',
                    resolve: {
                        test: function () {
                          return data;
                        }
                      }
                  })   
            })

          }

But I have error: angular.js:15567 Error: [$injector:unpr] Unknown provider: testProvider <- test <- catchError

How can I deal with it? Why "test" isn't readed in my modal component?

Answer 1

When you use a component with $uibModal, you don't have to inject the resolved data in the controller. It will be accessible under this.resolve (if you use the resolve binding, as you did).

Change the component's controller definition to this:

controller: function ($scope) {      // <-- removed `test` injection
    var vm = this;
    console.log(this.resolve.test);  // <-- `test` is on `resolve` object
                                     // <-- removed this.test = test
    this.save = () => {
      this.close()
    }
    this.cancel = function () {
      this.dismiss()
    }
}