UI 부트 스트랩 모달 창으로 AngularJS 사용자 지정 지시문을 깨기

ui 부트 스트랩 모달 창 내에서 사용자 지정 지시문 (자동 완성 된 Google 장소를 사용하는 지시문)을 올바르게 처리하는 데 문제가 있습니다. 그것은 창 밖에서 완벽하게 작동합니다. 모달 바디 div 안에 넣으면 아무 제안도 나타나지 않습니다. 본문과 바닥 글 div 사이에 넣으면 펑키하게 보입니다. 내가 this issue 믿을UI 부트 스트랩 모달 창으로 AngularJS 사용자 지정 지시문을 깨기

는 관련이 있지만 알아낼 방법을 정확하게 할 수 없습니다

내 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); 
     } 
    }; 
    });

여기에 관련 plunker

입니다 어떤 도움이나지도라도 크게 감사 할 것입니다. 에드. 나는이 문제에 3 일을 보냈다. 이 문제를 해결하면 내가 사용하고자하는 또 다른 지시어로도 도움이 될 것입니다. 감사!

출처

2014-07-24 estebanrv

안녕하세요, 자동 완성 기능이 모달 내부에서 작동하지 않습니까? 내부의 자동 완성 기능이 제대로 작동하기 때문에 .pac 컨테이너의 z- 색인에 제대로 표시되고 모달 안에 나타납니다. –

http://plnkr.co/edit/cOSg194rrE65j1TMbVlK?p=preview 여기에 plunker가 있습니다. index.html에 z- 색인을 추가했습니다. –

@VictorSoto 예! 그게 내 문제 였어. 와우 나는 결국 그것이 스타일을 만들고 있었다라고 생각한다! 이 글을 대답으로 올리면 받아 들일 것입니다. 정말 고맙습니다! – estebanrv

잘 victoroto에는 정확한 해결책이있었습니다.

나는 이것을 내 style.css에 추가했으며 이제는 잘 작동합니다!

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

출처

2014-07-29 15:57:23 estebanrv

UI 부트 스트랩 모달 창으로 AngularJS 사용자 지정 지시문을 깨기

답변

관련 문제