how to open modal from angular controller

Question

I have an angular controller and want to open a modal in my view.

My HTML

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

        <h4 class="modal-title" id="myModalLabel">Modal title</h4>

      </div>

      <div class="modal-body">

        ...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>


Settings Controller

function SettingsController($scope,WalletManager,Storage){


    $scope.pageClass = 'page-settings';


    ];



 $scope.myModal = function () {

        var modalInstance = $myModal.open({


        });

How can I open from controller ?

New to angular.. Needed to do this quickly without learning everything about how angular works... I don't get people who don't contribute anything positive and just go around posting stupid comments... What's the purpose ? — Eddie Martinez
– Eddie Martinez, Commented Jul 18, 2014 at 3:12

olingern · Accepted Answer · 2014-07-18 01:36:14Z

As advised by Soren, UI bootstrap is the way to go. Below is a sample from their documentation on opening modals via AngularJS.

And, a link to their Plunker using the code below.

<html>
<head>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="example.js"></script>
    <link href=
    "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel=
    "stylesheet">

    <title></title>
</head>

<body>
    <div>
        <script id="myModalContent.html" type="text/ng-template">
<div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
        </script> <button class="btn btn-default">Open me!</button>
        <button class="btn btn-default">Large modal</button> <button class=
        "btn btn-default">Small modal</button>

        <div>
            Selection from a modal: {{ selected }}
        </div>
    </div>
</body>
</html>

And, the javascript:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

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

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

Soren · Accepted Answer · 2014-07-18 01:06:29Z

2

Have a look at angular-bootstrap which does all the modal, plus a few more interesting effects and can be installed using bower.

The module comes with examples showing you how to call it from a controller.

answered Jul 18, 2014 at 1:06

Soren

14.8k4 gold badges43 silver badges69 bronze badges

Collectives™ on Stack Overflow

how to open modal from angular controller

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