AngularJs Open Route Page On Modal

Question

In my angular-message application I have an option to choose message from template. I need open the template list as modal.

My problem is that I have a template list as controller + view

How can I open the view without to duplicate my template list code.

 $stateProvider
    .state('app', {})
    .state('app.email', {

    }).state('app.email.compose', {
        url: '/compose',
        data: {
            pageTitle: 'Email Compose'
        },
        templateUrl: 'Assets/app/templates/email_compose.html'
    })
    .state('app.manage', {

    })
    .state('app.manage.templates', {
        template: '<div ui-view></div>',
        url: '/templates',
        abstract: true
    })
    .state('app.manage.templates.list', {
        url: '/',
        data: {
            pageTitle: 'Email List'
        },
        templateUrl: 'Assets/app/templates/tamplate_list.html'
    });

In my app route I want to open the app.manage.template.list from app.email.compose as modal

How can I do it?

Give your controller a name and define it on your application's module. Then reference both the template and controller from your modal. ngDialog module will allow you to do that ;) — Slava Fomin II
– Slava Fomin II, Commented Feb 13, 2016 at 22:55

iH8 · Accepted Answer · 2016-02-14 06:33:51Z

This can easily be done using UI-Bootstrap: https://angular-ui.github.io/bootstrap/ A walkthrough:

Load the Bootstrap CSS asset, note you don't need the JS and jQuery:

<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

Load the UI-Bootstrap asset:

<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>

Inject the ui.bootstrap module in your application:

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

Use the onEnter method of your state definition to open a new modal:

.state('myModalState', {
    'url': '/myModalUrl',
    'onEnter': [
                 '$uibModal',
        function ($uibModal) {
            $uibModal.open({
                'controller': 'myModalController',
                'templateUrl': 'myModalTemplate.html'
            }).result.then(
                function closed (item) {
                    // Executed when uibModalInstance is closed, returns value
                },
                function dismissed () {
                    // Executed when modal is dismissed/canceled
                }
            );
        }
    ]
});

Create a controller for your modal and inject $uibModalInstance:

.controller('myModalController', [
             '$scope', '$uibModalInstance',
    function ($scope,   $uibModalInstance) {

        $scope.item = 'foobar';

        $scope.ok = function () {
            $uibModalInstance.close($scope.item);
        };

        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };

    }
]);

And finally a template for the modal:

<div class="modal-header">
    <h4 class="modal-title">Title</h4>
</div><!-- /.modal-header -->
<div class="modal-body">
    {{item}}
</div><!-- /.modal-body -->
<div class="modal-footer">
    <button type="button" class="btn btn-warning" ng-click="cancel()">
        Cancel
    </button>
    <button type="button" class="btn btn-success" ng-click="ok()">
        Ok
    </button>
</div><!-- /.modal-footer -->

Now everytime you visit /myModalUrl or ui-sref or state.go to myModalState the modal automaticly opens.

Stacksnippet:

angular.module('app', [
    'ui.router',
    'ui.bootstrap'
]);
angular.module('app').config([
             '$stateProvider', '$urlRouterProvider',
    function ($stateProvider,   $urlRouterProvider) {

        $urlRouterProvider.otherwise('/');

        $stateProvider.state('root', {
            url: '/',
            templateUrl: 'root.html',
        });

        $stateProvider.state('modal', {
            url: '/modal',
            onEnter: [
                         '$uibModal', '$state',
                function ($uibModal,   $state) {
                    $uibModal.open({
                        'controller': 'modal',
                        'templateUrl': 'modal.html',
                    }).result.then(
                        function closed (item) {
                            // Executed when uibModalInstance is closed, returns value
                            $state.go('root');
                        },
                        function dismissed () {
                            // Executed when modal is dismissed/canceled
                            $state.go('root');
                        }
                    );
                }
            ]
        });

    }
]);
angular.module('app').controller('modal', [
             '$scope', '$uibModalInstance',
    function ($scope,   $uibModalInstance) {

        $scope.item = 'foobar';

        $scope.ok = function () {
            $uibModalInstance.close($scope.item);
        };

        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
        };

    }
]);

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" />
    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
    <script type="text/ng-template" id="root.html">
        <a ui-sref="modal">Open route in modal</a>
    </script>
    <script type="text/ng-template" id="modal.html">
        <div class="modal-header">
            <h4 class="modal-title">Title</h4>
        </div>
        <div class="modal-body">
            {{item}}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-warning" ng-click="cancel()">
                Cancel
            </button>
            <button type="button" class="btn btn-success" ng-click="ok()">
                Ok
            </button>
        </div>
    </script>
  </head>
  <body ui-view></body>
</html>

Plunker: http://plnkr.co/edit/5qrD7hB6i8vQEqa8jZ1G?p=preview

UI-Router FAQ on opening a modal when entering a state (mind you it's outdated because of some changes to the UI bootstrap modal directive):

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

And here's the reference for UI-Bootstrap's modal directive:

https://angular-ui.github.io/bootstrap/#/modal

24sharon · Accepted Answer · 2016-02-14 05:27:17Z

I resolve it by adding route as "child" from another state, that refer to same templateUrl templateUrl: 'Assets/app/templates/tamplate_list.html'

$stateProvider
     .state('app.email.compose', {
         url: '/compose',
         data: { pageTitle: 'Email Compose' },
         templateUrl: 'Assets/app/templates/email_compose.html'
     }).state('app.email.compose.template', {
         url: '/template',
         data: { pageTitle: 'Email Compose', modal: true },
         parent: 'app.email.compose',
         templateUrl: 'Assets/app/templates/tamplate_list.html'
     }).state('app.manage.templates.list', {
                url: '/',
                data: { pageTitle: 'Email List' },
                templateUrl: 'Assets/app/templates/tamplate_list.html'
    });

Collectives™ on Stack Overflow

AngularJs Open Route Page On Modal

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related