Получить ширину HTML-элемента во время выполнения в AngularJS

Question

Я медленно шагаю по пути создания директивы в 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" 
     }; 
    } 
    }; 
}); 

Разметка в моем-directive.html выглядит следующим образом:

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

Когда пользователь начинает вводить, функция getLocation обжигают в контроллере. Мне нужно получить ширину текстового поля поля при запуске getLocation. Как получить ширину этого элемента в AngularJS?

Answer 1

Вы должны передать element в качестве параметра в функции связи и рассчитать его ширину, используя offsetWidth.

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

} 

Вы можете обратиться к какому-то схожим сценариям на ссылках ниже:

1. https://gist.github.com/Zmaster/6923413
2. http://plnkr.co/edit/DeoY73EcPEQMht66FbaB?p=preview

Надеется, что это поможет вам :)

обновленного коду :

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