Get Width of HTML element at runtime in AngularJS

Question

I'm slowly fumbling my way through building a directive in AngularJS. Currently, my directive looks 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) {
        // Get width of "field"
      };
    }
  };
});

The markup in my-directive.html looks like this:

<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>

When a user starts typing, the getLocation function is fired in the controller. I need to get the width of the field textbox when getLocation is fired. How do I get the width of that element in AngularJS?

Mazzu · Accepted Answer · 2014-10-07 13:26:19Z

4

You need to pass element as parameter in link function and calculate its width using offsetWidth.

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

}

You can refer to somehow similar scenarios at below links:

Hope this will help you out :)

Updated Code:

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

edited Oct 7, 2014 at 13:26

answered Oct 7, 2014 at 12:24

Mazzu

2,84922 silver badges30 bronze badges

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

2 Comments

user70192 Over a year ago

Thank you for your response. How do I get the width of the element in my controller though? That's where I really need it. I need to get the width in my controller.

Mazzu Over a year ago

You can pass in the element to the controller, just like the scope: function someControllerFunc($scope, $element){ }

Collectives™ on Stack Overflow

Get Width of HTML element at runtime in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related