Angular.js (angular-ui) : "resolve" not returning anything in the child component

Question

While trying to get data from the "resolve" object. I cannot get anything from what is found in the parent component.

Structure

1. partner-component
   • partner-list-component

Result

Parent code

  function partnerCtrl($uibModal, get, role, loader, toastr, $translate) { ...
  vm.search = () => {
    loader.show();
    get.searchUser(vm.userId, vm.type).then((res) => {
      if (res.data.d.results.length) {
        const modalInstance = $uibModal.open({
          animation: true,
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          component: 'partnerList',
          size: 'lg',
          resolve: {
            items() {
              return res.data.d.results;
            },
          },
        });
   }
  

Child code

function partnerListCtrl($scope, uiGridConstants) {
    const $ctrl = this;

    $ctrl.items = this.resolve.items;

    this.gridOptions = {...},
        ],
        data: this.resolve.items,
    };

   ...
}

Answer 1

items should be a named property in your resolve's members

...
resolve: {
    items: () => {
        return res.data.d.results;
    },
},
...

Note that it is an arrow function to ensure res is still in scope.

Lastly, you should be able to have this resolved value injected into your controller's constructor. When declaring the controller, the injection token string is the same as the member name in your resolve object, in this case "item"

function partnerListCtrl($scope, uiGridConstants, items) {
    const $ctrl = this;

    $ctrl.items = items;

    this.gridOptions = {...},
        ],
        data: this.resolve.items,
    };

   ...
}

app.controller("partnerList", ["$scope", "uiGridConstants", "items", partnerListCtrl]);