Show and Hide dialog from AngularJS with Bootstrap UI

Question

I'm working on an app that uses AngularJS and Bootstrap. I am trying to show and hide a dialog from my controller using Bootstrap UI. For some reason, when I try to open the dialog, I just see a blackened screen. However, the dialog never appears.

My Plunker is here

In that plunker, you can see that I have:

var modalInstance = $modal.open({
  templateUrl: 'item-dialog.html',
  size: 'sm'
});

modalInstance.result.then(
  function (res) {
    console.log('here');
  },
  function (err) {
    $log.info('Modal dismissed at: ' + new Date());
  }
);

Which looks correct to me. Why is only a black screen appearing? Thank you!

stetro · Accepted Answer · 2014-09-19 12:50:17Z

The Bootstrap UI directive just needs the content of your modal as template. You can simply remove the wrapping tags and it will show as expected:

<div id="scoopModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">...</div></div></div>

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

app.service('myService', ['$http', '$q', function($http, $q) {
  this.getOptions = function(prefix) {
			return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){
			  console.log(response.data.results);
        return response.data.results;
      });
		};
}]);

app.controller('MyController', ['$scope', '$modal', function ($scope, $modal) {
    $scope.query = 'test';
    
    $scope.newItem_Click = function() {
        var modalInstance = $modal.open({
            templateUrl: 'item-dialog.html',
            size: 'sm'
        });

        modalInstance.result.then(
            function (res) {
                console.log('here');
            },
            function (err) {
                $log.info('Modal dismissed at: ' + new Date());
            }
        );
    };
    
    $scope.saveItem = function() {
      console.log($scope.newItem);
      alert('Need to close dialog here.');
    };
}]);

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="[email protected]" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    

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

  <body ng-app="app" ng-controller="MyController">
    <h1>Hello Plunker!</h1>
    
  <button class="btn btn-info" data-toggle="modal" ng-click="newItem_Click()">new item</button>
  <script type="text/ng-template" id="item-dialog.html">
    
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">New Scoop</h4>
          </div>
          <div class="modal-body">
            <form role="form">
              <div class="form-group">
                <label for="type">Type</label>
                <select id="type" class="form-control" ng-model="newItem.typeId">
                  <option value="-1">Other</option>
                  <option value="1">Product</option>
                  <option value="2">Service</option>
                </select>
              </div>

              <div class="form-group">
                <label>Text</label>
                <textarea class="form-control" rows="3" ng-model="newItem.data"></textarea>
              </div>
            </form>                
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" ng-click="saveItem()">Save Scoop</button>
          </div>
    
</script>
    
  </body>

</html>

Thank you for sharing. How do you close the dialog from MyController though? When I follow the example, I get a module load error when I try to inject $modalInstance. Thank you so much for sharing your knowledge.

stetro · Accepted Answer · 2014-09-19 13:54:07Z

0

For closing the modal you can simply add a controller like this:

var modalInstance = $modal.open({
    templateUrl: 'item-dialog.html',
    size: 'sm',
    controller:function($scope, $modalInstance){
        $scope.saveItem=function(){
             $modalInstance.close(); 
        };
    }
});

answered Sep 19, 2014 at 13:54

stetro

5472 gold badges6 silver badges11 bronze badges

Collectives™ on Stack Overflow

Show and Hide dialog from AngularJS with Bootstrap UI

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related