Compiling expression in html in AngularJS controller

Question

I bind html from the AngularJS controller and display this information in Bootstraps $uibModal like so:

$scope.phoneNumber = '0111111111';

var modalInstance = $uibModal.open({
    template: '<div class="modal-header d-flex flex-column align-items-center justify-content-center">\
                    <p class="font-h3 font-weight-medium">Please contact us on {{phoneNumber}}</p>                     

                </div>',
    appendTo: undefined,
    controllerAs: '$ctrl',
    controller: ['$uibModalInstance', '$timeout', '$state', function($uibModalInstance, $timeout, $state){

        //LOGIC GOES HERE

   }]
});

When the modal displays, the static text displays, but the expressions aren't compiling.

Question

How do I get the expression to compile in the controller before displaying to user?

stintaril · Accepted Answer · 2020-06-12 16:43:11Z

1

You need to add 'resolve' to your modalInstance with what you want to send to the modal controller. After that you need to pass it in as a dependency to the modal.

$scope.phoneNumber = '0111111111';

var modalInstance = $uibModal.open({
    template: '<div class="modal-header d-flex flex-column align-items-center justify-content-center">\
                    <p class="font-h3 font-weight-medium">Please contact us on {{$ctrl.phoneNumber}}</p>                     
               </div>',
    appendTo: undefined,
    controllerAs: '$ctrl',
    resolve: {
    phone: function () {
        return $scope.phoneNumber;
      }
    },
    controller: ['$uibModalInstance', '$timeout', '$state', 'phone', function($uibModalInstance, $timeout, $state, phone){

        //LOGIC GOES HERE
        this.phoneNumber = phone;
   }]
});

answered Jun 12, 2020 at 16:43

stintaril

1408 bronze badges

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

Collectives™ on Stack Overflow

Compiling expression in html in AngularJS controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related