Bdtjtk

We are using angular version 1.5.10 and ui-router version 0.3.1. We are componentify our controller and services.

When we are trying to open modal pop up using $uibModal.open method. It is opening the template of the component in the modal pop up. But it is not showing any of the data passed to the controller opened in the modal, using resolve

project Component from where we have to call is as follows -

import * as angular from 'angular';



export let ProjectComponent = {

    selector: 'ProjectDetails',

    templateUrl: 'app/entities/project-details/project-details.html',

    bindings: {},

    controller: ProjectController,

    controllerAs: 'vm'

};



ProjectController.$inject = ['project', '$http', '$scope', '$filter', '$uibModal', 'Record'];



function ProjectController(project, $http, $scope, $filter, $uibModal, Record) {



var vm = this;

var modalInstance = $uibModal.open({

    template: '<project-task-details $resolve="$resolve" ></project-task-details>',

    backdrop: 'static',

    windowClass: 'viewerModal style-1',

    size: 'lg',

    resolve: {

        data: function() {

            return project.getTaskDetails({

                projectId: projectId

            });

        }

    }

  });

}    



angular

    .module('projectApp')

    .component(ProjectComponent.selector, ProjectComponent);

Project Service which is using from this Project component -

import * as angular from 'angular';

class project {

    constructor($http) {

        this.$http = $http;

    }



    getTaskDetails(params) {

        return this.$http.get('api/project' + '/' + params.projectId).success((response) => response.data);

    }



}

angular

    .module('projectApp')

    .service('project', project);



project.$inject = ['$http'];

export default project;

Now the page content which we are trying to load i.e. ProjectTaskDetailComponent:-

import angular from 'angular';



export let ProjectTaskDetailComponent = {

    selector: "projectTaskDetails",

    templateUrl: 'app/entities/project-details/project-task-details.html',

    bindings: {

        //  modalInstance: '<',

        data: '<'

    },

    controller: ProjectTaskDetailController,

    controllerAs: 'vm'

};





ProjectTaskDetailController.$inject = ;



function ProjectTaskDetailController() {



    var vm = this;

    vm.$onInit = function() {

        vm.projectDetail = this.data;

    }

    // vm.projectDetail = data;

    vm.clear = clear;

    setTimeout(function() {

        $('#loadingImg').css('display', 'none');

    }, 1000);



    function clear() {



        // $uibModalInstance.dismiss('cancel');

    }

}



angular

    .module('projectApp')

    .component(ProjectTaskDetailComponent.selector, ProjectTaskDetailComponent);

I tried to open modal pop up which is opened without data. When we debug the code, the data in bindings is undefined in ProjectTaskdetailComponent when in template we pass as data = "$resolve.data". If we use $resolve = "$resolve" in template, still data is undefined while we check in ProjectTaskdetailComponent.

Also tried all bindings like data: "<", data: "=", data: "@", but the same issue persists i.e. data is undefined.

Also tried to update the angular-ui-router to 0.4.2 version but it still didn't work.

Try using component instead of template in your uibModal.open.

From the docs:

component (Type: string, Example: myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have restrict: 'E' and a template or templateUrl set.

It supports these bindings:

close - A method that can be used to close a modal, passing a result. The result must be passed in this format: {$value: myResult}

dismiss - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format: {$value: myRejectedResult}

modalInstance - The modal instance. This is the same $uibModalInstance injectable found when using controller.

resolve - An object of the modal resolve values. See UI Router resolves for details.

So in your case, it might look something like:

var modalInstance = $uibModal.open({

    component: 'projectTaskDetails',

    backdrop: 'static',

    windowClass: 'viewerModal style-1',

    size: 'lg',

    resolve: {

        data: function() {

            return project.getTaskDetails({

                projectId: projectId

            });

        }

    }

  });

}   

Edit: Your component bindings will need to conform to their api, so it should look like:

export let ProjectTaskDetailComponent = {

    selector: "projectTaskDetails",

    templateUrl: 'app/entities/project-details/project-task-details.html',

    bindings: {

        modalInstance: '<',

        resolve: '<'

    },

    controller: ProjectTaskDetailController,

    controllerAs: 'vm'

};