Question

我想在离子应用程序中获取元素的宽度。但是我得到了undefined这段代码：

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>

你能帮我搞清楚吗？

由于

Answer 1

最初，创建一个属性指令以获取元素的宽度并分配给<a></a>标记。在custom指令中，您可以轻松获得元素的宽度。

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);
     }
   }
 });

访问元素以在控制器中获取其宽度不是一个好习惯。因此，获得宽度的最佳方法是使用自定义指令。

Answer 2

如果你想使用角度，这是代码;

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

但我会夸大你为该div添加一个id，并使用第一个。像这样：

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

和角度元素：angular.element(document.getElementById(#suggestion)).clintWidth;

如果它与你合作，请告诉我。

Answer 3

Javascript的clientWidth属性不适用于display类型为inline的HTML元素。默认情况下，anchor代码为inline。

您可以尝试将display:inline-block添加为元素的样式。

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

请注意，clientWidth不包含任何边框或滚动条，而offsetWidth的位置除外。

在您的示例中，您在尝试查找的HTML之前有脚本。除非您在页面加载后运行该特定块，否则这将无效。作为一个简单的解决方案，您可以将脚本块移动到HTML下面。

用角度获得元素宽度

3 个答案: