AngularJS custom directive breaking with UI Bootstrap modal window

Question

I am having trouble getting a custom directive (one that does autocomplete google places) to work properly inside a ui bootstrap modal window. It works perfectly outside the window. If i put it inside the modal-body div, no suggestions show up. If I put it in between the body and footer divs, it looks funky.

I believe this issue is relevant but cannot figure out how exactly:

My index.html:

<body>
    <div ng-controller="ModalDemoCtrl">
        <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
        <div ng-show="selected">Selection from a modal: {{ selected }}</div>
    </div>
<-- this form works fine -->
<form id="form2" role="form">
    <div class="form-group move-down">
    <input type="text" id="Autocomplete2" class="form-control" ng-autocomplete="result1" details="details1" options="options1" />
    </div>
</form>
</body>

JS:

'use strict';
angular.module('myApp.directives', []).
.directive('ngAutocomplete', function($parse) {
    return {
        scope: {
        details: '=',
        ngAutocomplete: '=',
        options: '='
     },

        link: function(scope, element, attrs, model) {
            //options for autocomplete
            var opts;
            //convert options provided to opts
            var initOpts = function() {
            opts = {};
            if (scope.options) {
                if (scope.options.types) {
                    opts.types = [];
                    opts.types.push(scope.options.types)
                }
                if (scope.options.bounds) {
                    opts.bounds = scope.options.bounds
                }
                if (scope.options.country) {
                    opts.componentRestrictions = {
                    country: scope.options.country
                }
              }
          }
    };
        initOpts();

        //create new autocomplete
        //reinitializes on every change of the options provided
        var newAutocomplete = function() {
            scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
            scope.$apply(function() {
                scope.details = scope.gPlace.getPlace();
                scope.ngAutocomplete = element.val();
             });
          })
        };
         newAutocomplete();

        //watch options provided to directive
        scope.watchOptions = function () {
          return scope.options
    };
        scope.$watch(scope.watchOptions, function () {
          initOpts();
          newAutocomplete();
          element[0].value = '';
          scope.ngAutocomplete = element.val();
        }, true);
      }
    };
  });

Here is the relevant plunker

ANY help or guidance would be greatly appreciated. I have spent 3 days on this issue. Fixing this would help me also with another directive I want to use. Thanks!

Hey, is your problem autocompleter not working inside the modal? because on your the autocompleter inside it is working, it just appears behind the modal, z-index the .pac-container properly and it will appear inside the modal. — Victor Soto
– Victor Soto, Commented Jul 24, 2014 at 5:25
plnkr.co/edit/cOSg194rrE65j1TMbVlK?p=preview here is the plunker i just added a z-index in the index.html — Victor Soto
– Victor Soto, Commented Jul 24, 2014 at 5:26
@VictorSoto yes! that was my problem. wow i cant believe it was styling after all! if you post this as an answer i will accept it. thank you so much! — estebanrv
– estebanrv, Commented Jul 24, 2014 at 9:15

estebanrv · Accepted Answer · 2014-07-29 15:57:23Z

3

well victorsoto had the correct solution.

i added this to my style.css and it now works fine!

.pac-container {
z-index: 99999999;
}

answered Jul 29, 2014 at 15:57

estebanrv

7135 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

AngularJS custom directive breaking with UI Bootstrap modal window

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