Passing data between controllers with a promise Angularjs

Question

I am trying to pass some simple boolean and string values with my promise. Here is the method renedering the a modal within the view:

$scope.openHjelpModal = function (field) {

    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'app/produkt/ny/views/hjelpModal.html',
        controller: 'hjelpModalController',
    });


    modalInstance.result.then(function (field) {
        var kategori = '';
        var pakning = false;
        var epd = false; 
        var lansering = false; 

        switch (field) {
            case 'p':
                console.log('pakningsoppbyggning rendering');
                pakning = true; 
                epd = false; 
                lansering = false;
                kategori = 'pakningsoppbyggning'; 
                break; 
            case 'e':
                console.log('epd-kategori rendering');
                pakning = false;
                epd = true;
                lansering = false; 
                kategori = 'EPD-kategori'; 
                break; 
            case 'l':
                console.log('lansering rendereing');
                pakning = false;
                epd = false;
                lansering = true; 
                kategori = 'lansering'; 
                break; 
        }
    }, function () {
        //logService.info('Modal dismissed at: ' + new Date());
    });

};

I need to pass the booleans and string to the modal somehow. I know the recomended approach would be a service, but I haven't been able to follow any of the solutions provided here so far.

Here is how I will be using the variables in the modal(html file):

<h4>Hjelp for:  {{kategori}} </h4>

<div ng-if="lansering">
    <p> kommer fra lansering</p>
</div>

<div ng-if="epd">
    <p> kommer fra epd</p>
</div>

<div ng-if="pakning">
    <p> kommer fra pakning</p>
</div>




<div class="modal-footer">
    <button class="btn btn-green pull-left" type="button" ng-click="lukk();">Lukk</button>
</div>

running console log from the hjelpModalController returns undefined, this is with the changes provided in the answers:

     $scope.openHjelpModal = function (field) {

                var modalInstance = $uibModal.open({
                    animation: true,
                    templateUrl: 'app/produkt/ny/views/hjelpModal.html',
                    controller: 'hjelpModalController',
                    resolve: function () {
                            return field; 
                    }
                });
                console.log(field); // works here

    }

And from the hjelpModalController:

angular.module('app').controller('hjelpModalController', hjelpModalController); 
hjelpModalController.$inject = ['$scope','$uibModalInstance'];

function hjelpModalController($scope, $uibModalInstance, field) {
    console.log(field); // returns undefined

}

UPDATE:

Here is the latest progress i have made:

controller passing the variable:

   $scope.openHjelpModal = function (field) {
            var modalInstance = $uibModal.open({
                animation: true,
                templateUrl: 'app/produkt/ny/views/hjelpModal.html',
                controller: 'hjelpModalController',
                resolve: {
                    selectedHelpModal: function () {
                        console.log(field); // correct output
                        return field; 
                    }
                }
            });



            modalInstance.result.then(function () {
                console.log('or here'); 
                console.log(field); // correct output 
            });
}

controller recieving the variable:

    angular.module('app').controller('hjelpModalController', hjelpModalController); 

    hjelpModalController.$inject = ['$scope','$uibModalInstance']; 

    function hjelpModalController($scope, $uibModalInstance, field) {
        console.log('hjelp modal controler is running'); 
        console.log(field); // undefined
}

Icycool · Accepted Answer · 2017-09-07 08:31:45Z

1

Actually uibModal provides a resolve param for this purpose.

var modalInstance = $uibModal.open({
    animation: true,
    templateUrl: 'app/produkt/ny/views/hjelpModal.html',
    controller: 'hjelpModalController',
    resolve: {
        field: function() {
            return field;
        }
    }
});

It is then accessible by DI inside your modal controller (the DI name follows the key name in resolve)

.controller('hjelpModalController', function(field) {
    console.log(field); 
})

edited Sep 7, 2017 at 8:31

answered Sep 7, 2017 at 8:14

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steingrrim Over a year ago

running your solution returns the following console output: Uncaught SyntaxError: In strict mode code, functions can only be declared at top level or inside a block.

Icycool Over a year ago

@Steingrrim sorry, resolve should be an object instead of function

Steingrrim Over a year ago

With some minor changes, your answer solved my problem. Thank you sir.

shikhar · Accepted Answer · 2017-09-07 08:33:15Z

There is only a small change in the code provided above.

 var modalInstance = $uibModal.open({
    templateUrl: 'app/produkt/ny/views/hjelpModal.html',
    controller: 'hjelpModalController',
    animation: true,
    resolve: {
        field: function() {
            return field;
        }
    }
});

And in the modal controller:

.controller('hjelpModalController', function(field) {
    console.log(field); 
})

If you want to dismiss the modal (most probably you will) add $uibModalInstance as a param into the modal controller.

controller('hjelpModalController', function(field,$uibModalInstance) {
    console.log(field); 
  $scope.cancel = function() {
  $uibModalInstance.dismiss('cancel');
};



})

Collectives™ on Stack Overflow

Passing data between controllers with a promise Angularjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related