在AngularJS项目设置键盘缓冲下拉的宽度 [英] Setting Width of Typeahead Drop Down in AngularJS project

问题描述

我一直摔跤与引导UI键盘缓冲控制。我想设置下拉框在运行时的宽度。在<一个href=\"http://stackoverflow.com/questions/26260081/set-width-of-html-element-at-runtime-in-angularjs\">last SO质疑我要求处理在运行时设置元素的宽度。而回答正确，答案不会在键盘缓冲指令由于某些原因的情况下工作。目前，我使用的键盘缓冲控制在自己的指令，是这样定义的：

I've been wrestling with the Bootstrap UI Typeahead control. I am trying to set the width of the drop down box at run time. The last SO question I asked dealt with setting the width of elements at runtime. While answered properly, the answer does not work in the context of the Typeahead directive for some reason. Currently, I am using the Typeahead control in my own directive, which is defined like this:

.directive('myDirective', function () {
  return {
    restrict:'E',
    transclude: true,
    scope: {
      showLinks: '=?',
      query: '='
    },
    templateUrl: '/directives/my-directive.html',
    controller: function ($scope) {
      if (angular.isUndefined($scope.showLinks)) {
        $scope.showLinks = true;
      }

      $scope.getLocation = function(l) {
    var searchField = element.find('input');
        var width = searchField[0].offsetWidth;

        var dropdown = $element.find('.dropdown-menu');
        angular.element(dropdown[0]).css('width', (width + 'px'));    
      };
    }
  };
});

我-directive.html看起来是这样的：

my-directive.html looks like this:

<div style="width:100%;">
    <span>{{showLinks}}</span> <!-- renders just fine -->
    <input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
           typeahead="option as option.Name for option in getLocation($viewValue)"
           typeahead-min-length="3" typeahead-template-url="location.html" />
    <script type="text/ng-template" id="location.html">
      {{showLinks}} <!-- Never renders -->
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
    </script>
</div>

我设置的下拉菜单中，似乎是相同的宽度为我的指令文本框的宽度怎么办？我的文本是在不同屏幕上不同的尺寸。这就是为什么我不只是硬code的值。

How do I set the width of the dropdown menu that appears to be the same width as the textbox in my directive? My textbox is a different size on different screens. That's why I do not just hard-code a value.

推荐答案

参照答案<一个href=\"http://stackoverflow.com/questions/25116635/angularui-bootstrap-typeahead-grouping-results\">this SO质疑，你可以尝试换一个div里面的结果，然后所需的宽度分配给它。只是为了说明，有div的宽度设置为 800像素。

Referring to the answer to this SO question, you can try to wrap the results inside a div and then assign the required width to it. Just to illustrate, have set the width of the div to 800px.

<div style="width:100%;">
    <span>{{showLinks}}</span> <!-- renders just fine -->
    <input type="text" autofocus autocomplete="off" class="form-control" ng-model="query"
           typeahead="option as option.Name for option in getLocation($viewValue)"
           typeahead-min-length="3" typeahead-template-url="location.html" />
    <script type="text/ng-template" id="location.html">
      <div style="width:800px;">{{showLinks}}</div>
      <a>
        <span ng-bind-html="match.label | typeaheadHighlight:query"></span>
      </a>
    </script>
</div>

这篇关于在AngularJS项目设置键盘缓冲下拉的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！