Javascript 在AngularJS中获取运行时HTML元素的宽度

我正在慢慢摸索着用AngularJS构建一个指令。目前，我的指令如下所示：

.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) {
        // Get width of "field"
      };
    }
  };
});

<div style="width:100%;">
    <input id="field" 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>

my-directive.html中的标记如下所示：

.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) {
        // Get width of "field"
      };
    }
  };
});

<div style="width:100%;">
    <input id="field" 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>

{{showLinks}}

---

当用户开始键入时，会在控制器中激发getLocation函数。我需要在触发getLocation时获取字段文本框的宽度。如何在AngularJS中获得该元素的宽度？

您需要在link函数中将

元素作为参数传递，并使用
offsetWidth
计算其宽度

link: function(scope, element, attrs) {
        var elInput = element.find('input');
        alert(elInput[0].offsetWidth) ; // gives offsetwidth of element

}

您可以在以下链接中参考类似的场景：



希望这能帮到你：）

更新代码：

app.controller('MainCtrl', function($scope, $element) {
  var elInput = $element.find('input');
  alert(elInput[0].offsetWidth);
  $scope.name = 'World';
});

您需要将
元素
作为参数传递到link函数中，并使用
offsetWidth
计算其宽度

link: function(scope, element, attrs) {
        var elInput = element.find('input');
        alert(elInput[0].offsetWidth) ; // gives offsetwidth of element

}

您可以在以下链接中参考类似的场景：



希望这能帮到你：）

更新代码：

app.controller('MainCtrl', function($scope, $element) {
  var elInput = $element.find('input');
  alert(elInput[0].offsetWidth);
  $scope.name = 'World';
});

谢谢你的回复。但是，如何获得控制器中元素的宽度？这就是我真正需要它的地方。我需要获取控制器中的宽度。您可以将元素传递给控制器，就像scope:function someControllerFunc（$scope，$element）{}谢谢您的回复。但是，如何获得控制器中元素的宽度？这就是我真正需要它的地方。我需要获取控制器中的宽度。您可以将元素传递给控制器，就像scope:function someControllerFunc（$scope，$element）{}