Question

103

How to use angular component with ui.bootstrap.modal in angular 1.5?

rated 0 times [ 106] [ 3] / answers: 1 / hits: 43722 / 8 Years ago, mon, april 4, 2016, 12:00:00

I'd like to use angular component with ui.bootstrap.modal. angular version is 1.5.

I tried to use like below.

component

function MyComponentController($uibModalInstance){

  var ctrl = this;



  ctrl.doSomething = function() {

    //doSomething

  }

}



app.component('myComponent', {

  contoller: MyComponentController,

  templateUrl: '/path/to/myComponent.html'

}

parent controller

function parentController($uibModal){

  var ctrl = this;



  ctrl.openModal = function(){

    var modalInstance = $uibModal.open({

      template: '<my-component></my-component>'



  }

}

And when I execute parentController.openModal() , I got the error of $injector:unpr Unknown Provider although modal window is open.

Is there a way to use angular component with ui.bootstrap.modal?
If you need more information, please let me know that.

Thank you.

EDIT

I've got a way to use component with ui.bootstrap.modal from Renato Machado, Thanks Renato.

But I feel It's a little bit complicated and not convenient. So finally I think that it's better to use component inside the modal.

Modal is opened with regular way(just set controller and template in $uibModal.open({}) ) and the modal contains the component which has logics you want to use commonly.

Modal should have only simple logics that are related with modal like close modal window.

Another logics mainly related with business/Application should be in component.

It makes easy to commonalize.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

zaynerogerb

Add To Favorites

Follow

Total Points: 454

Total Questions: 109

Total Answers: 97

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

zaynerogerb questions

1 Error: Caching was left unconfigured. Babel's plugins when I installed Font Awesome to my react app

Fri, Mar 4, 22, 00:00, 2 Years ago

1 Cannot import Popper.js in VueJS

Sat, Sep 5, 20, 00:00, 4 Years ago

1 Framer Motion exit animation not firing on accordion with react-router-dom

Wed, Aug 12, 20, 00:00, 4 Years ago

1 How to use Behaviorsubject to detect change

Fri, May 8, 20, 00:00, 4 Years ago

1 How to solve DELETE error 404 not found express.js

Mon, Apr 6, 20, 00:00, 4 Years ago

View All

answered 8 Years ago antoinette · Accepted Answer

EDIT: As of UI Bootstrap 2.1.0 there is native support for component in bootstrap modals. It looks like there have been several quick releases after 2.1.0 to fix some issues with the modals, so I'd be sure to grab the latest.

See this Plunk for a version using UI Bootstrap 2.1.0+

http://plnkr.co/edit/jy8WHfJLnMMldMQRj1tf?p=preview

angular.module('app', ['ngAnimate', 'ui.bootstrap']);



angular.module('app')

  .component('myContent', {

     template: 'I am content! <button type=button class=btn btn-default ng-click=$ctrl.open()>Open Modal</button>',

     controller: function($uibModal) {

        $ctrl = this;

        $ctrl.dataForModal = {

        name: 'NameToEdit',

        value: 'ValueToEdit'

     }



    $ctrl.open = function() {

      $uibModal.open({

         component: myModal,

         resolve: {

           modalData: function() {

             return $ctrl.dataForModal;

           }

         }

       }).result.then(function(result) {

            console.info(I was closed, so do what I need to do myContent's  controller now.  Result was->);

      console.info(result);

       }, function(reason) {

           console.info(I was dimissed, so do what I need to do myContent's controller now.  Reason was-> + reason);

       });

    };

  }

});



angular.module('app')

  .component('myModal', {

template: `<div class=modal-body><div>{{$ctrl.greeting}}</div> 

<label>Name To Edit</label> <input ng-model=$ctrl.modalData.name><br>

<label>Value To Edit</label> <input ng-model=$ctrl.modalData.value><br>

<button class=btn btn-warning type=button ng-click=$ctrl.handleClose()>Close Modal</button>

<button class=btn btn-warning type=button ng-click=$ctrl.handleDismiss()>Dimiss Modal</button>

</div>`,

  bindings: {

    modalInstance: <,

    resolve: <

  },

  controller: [function() {

    var $ctrl = this;

    $ctrl.$onInit = function() {

      $ctrl.modalData = $ctrl.resolve.modalData;

    }

    $ctrl.handleClose = function() {

      console.info(in handle close);

      $ctrl.modalInstance.close($ctrl.modalData);

    };

    $ctrl.handleDismiss = function() {

      console.info(in handle dismiss);

      $ctrl.modalInstance.dismiss(cancel);

    };

  }]

});

Original answer is below:

I was trying to figure this out the other day too. I took the information I found in this post along with this link to try and come up with an alternate way to accomplish this. These are some reference links I found that helped me:

https://github.com/angular-ui/bootstrap/issues/5683

http://www.codelord.net/ (this one helped in understanding passing arguments to callbacks in components)

Also here is a Plunk: http://plnkr.co/edit/PjQdBUq0akXP2fn5sYZs?p=preview

I tried to demonstrate a common real world scenario of using a modal to edit some data.

angular.module('app', ['ngAnimate', 'ui.bootstrap']);



angular.module('app')

.component('myContent', {

    template: 'I am content! <button type=button class=btn btn-default ng-click=$ctrl.open()>Open Modal</button>',

    controller: function($uibModal) {

        $ctrl = this;

        $ctrl.dataForModal = {

            name: 'NameToEdit',

            value: 'ValueToEdit'

        }

        $ctrl.open = function() {

            $uibModal.open({

                template: '<my-modal greeting=$ctrl.greeting modal-data=$ctrl.modalData $close=$close(result) $dismiss=$dismiss(reason)></my-modal>',

                controller: ['modalData', function(modalData) {

                    var $ctrl = this;

                    $ctrl.greeting = 'I am a modal!'

                    $ctrl.modalData = modalData;

                }],

                controllerAs: '$ctrl',

                resolve: {

                    modalData: $ctrl.dataForModal

                }

            }).result.then(function(result) {

                console.info(I was closed, so do what I need to do myContent's controller now and result was->);

                console.info(result);

            }, function(reason) {

                console.info(I was dimissed, so do what I need to do myContent's controller now and reason was-> + reason);

            });

        };

    }

});



angular.module('app')

.component('myModal', {

    template: `<div class=modal-body><div>{{$ctrl.greeting}}</div> 

<label>Name To Edit</label> <input ng-model=$ctrl.modalData.name><br>

<label>Value To Edit</label> <input ng-model=$ctrl.modalData.value><br>

<button class=btn btn-warning type=button ng-click=$ctrl.handleClose()>Close Modal</button>

<button class=btn btn-warning type=button ng-click=$ctrl.handleDismiss()>Dimiss Modal</button>

</div>`,

    bindings: {

        $close: '&',

        $dismiss: '&',

        greeting: '<',

        modalData: '<'

    },

    controller: [function() {

        var $ctrl = this;

        $ctrl.handleClose = function() {

            console.info(in handle close);

            $ctrl.$close({

                result: $ctrl.modalData

            });

        };

        $ctrl.handleDismiss = function() {

            console.info(in handle dismiss);

            $ctrl.$dismiss({

                reason: 'cancel'

            });

        };

    }],

});