get element width with angular

Question

I am trying to get an element's width in my ionic app. But I get an undefined with this code:

html:

$scope.suggestProWidth = angular.element(document.querySelectorAll("suggestPro")[0]).clientWidth;
console.log("$scope.suggestProWidth", $scope.suggestProWidth);

controllers.js:

        <ion-slide ng-repeat="s in [0,1,2,3,4,5,6]">
            <ul>
                <li ng-repeat="item in prodata | matchingProBrand:computed.proName:computed.proBrand | limitTo:s*sliderItemNumber+sliderItemNumber  | limitTo:-sliderItemNumber">
                    <a class="suggestPro" ng-click="launchComputeService(item.id)">
                        <span><img ng-src={{imagesUrls[item.imageName]}} /></span>
                        <p class="flex-caption"> {{item.model}} - {{item.name}}</p>
                    </a>
                </li>
            </ul>   
        </ion-slide>

Can you help me figure this out ?

Thanks

What is suggestPro? querySelector and querySelectorAll takes .class or #id or tagName or any css selector. — Bogdan Kuštan
– Bogdan Kuštan, Commented Nov 12, 2015 at 18:14
This $scope.suggestProWidth = angular.element(document.querySelectorAll(".suggestPro")[0]).clientWidth; console.log("$scope.suggestProWidth", $scope.suggestProWidth); doesn't work either... — Louis
– Louis, Commented Nov 12, 2015 at 18:22
Possible duplicate of How can I get the width of an element using AngularJS? — isherwood
– isherwood, Commented Nov 12, 2015 at 18:30

Mr Lister · Accepted Answer · 2015-11-18 09:32:14Z

2

Initially, create an attribute directive to get width of an element and assign to the <a></a> tag. In the custom directive, you can get width of an element easily.

HTML:

<ion-slide ng-repeat="s in [0,1,2,3,4,5,6]">
  <ul>
    <li ng-repeat="item in prodata |  
      matchingProBrand:computed.proName:computed.proBrand | 
      limitTo:s*sliderItemNumber+sliderItemNumber | limitTo: 
      sliderItemNumber">
        <a custom-item class="suggestPro" 
          ng-click="launchComputeService(item.id)">
          <span><img ng-src={{imagesUrls[item.imageName]}} /></span>
          <p class="flex-caption"> {{item.model}} - {{item.name}}</p>
        </a>
    </li>
  </ul>   
</ion-slide>

JS:

angular.module(modulename)
 .directive('customItem',function(){
   return{
     restrict : 'A',
     link:function(scope,element){
        var eleWidth = element.innerWidth();
        console.log(eleWidth);
     }
   }
 });

Accessing element to get its width in controller is not a good practice. So, best way to get its width is using custom directive.

edited Nov 18, 2015 at 9:32

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Nov 13, 2015 at 8:46

suneetha

8171 gold badge6 silver badges14 bronze badges

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

1 Comment

Louis Over a year ago

thanks, your solution seems "good practices" so I like it of course. But how can I then use the width to calculate something else in the controller (the number of item displayed in a slider (slide-box from ionic) ?

Nadeem Khoury · Accepted Answer · 2015-11-12 20:47:32Z

If you want to use it with angular, here is the code;

angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;

but I will sugest you put an id for that div, and use the first one. like this:

<li id="suggestion" ng-repeat="item in prodata | matchingProBrand:computed.proName:computed.proBrand | limitTo:s*sliderItemNumber+sliderItemNumber  | limitTo:-sliderItemNumber">
                <a class="suggestPro" ng-click="launchComputeService(item.id)">
                    <span><img ng-src={{imagesUrls[item.imageName]}} /></span>
                    <p class="flex-caption"> {{item.model}} - {{item.name}}</p>
                </a>

and angular element:angular.element(document.getElementById(#suggestion)).clintWidth;

let me if it works with you bro.

Shaun · Accepted Answer · 2015-11-12 23:24:03Z

1

Javascript's clientWidth property does not work on HTML elements that have a display type of inline. By default an anchor tag is inline.

You can try adding display:inline-block as a style to the element.

<a ng-click="" style="display:inline-block" />

Be aware clientWidth does not include any border or scrollbar, where as offsetWidth does.

In your example, you have your script before the HTML you are trying to find. This will not work unless you run that particular block after page load. As a simple solution you can move the script block below the HTML.

edited Nov 12, 2015 at 23:24

answered Nov 12, 2015 at 23:07

Shaun

9279 silver badges16 bronze badges

Collectives™ on Stack Overflow

get element width with angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related