Question

我试图在指令中获取元素宽度。

我有类似

的东西

HTML

 <my-dir  title=“toy.title” ng-if=“toy.name”></my-dir>

指令

(function () {
    'use strict';

    angular.module(‘myApp’)
        .directive(‘myDir’, myDir);

    function myDir() {
        var directive = {
            template: '<div class=“myClass”>Test here</div>',
            restrict: 'E',
            controller: testCtrl
        };

        return directive;
    }

    function testCtrl($element) {
        console.log($element[0].clientWidth()) -> output 0
    }
})();

我需要获取元素宽度来构建我的特征，但是当元素中有字符串‘Test here’时它会输出0。它应该大于0.我不知道出了什么问题，有人可以帮助我吗？非常感谢！

Answer 1

<强>考虑：

这是一个棘手的问题，因为无法保证DOM在控制器初始化时已经渲染。

此外，如果用户调整窗口大小并且元素改变大小，该怎么办？考虑您使用元素的维度，以及更改大小的可能性是否适用于您的用例。

<强>解决方案：

我使用了一些不同的方法，我不会认为它们中的任何一种都是完美的。但它们确实有效，不同的更适合不同的用例。

可能是最快+最脏的方法：使用$timeout或$interval检查一定时间延迟后的宽度。

另一种方法是在返回元素宽度的函数上运行$watch。

$scope.$watch(function(){
    return $element[0].clientWidth;
}, function(width){
    console.log('width of: ', width);
});

一个实际例子：

我的应用中最常见的用例是这样的：

指令初始化+生成异步请求以加载内容
内容请求已解决，将数据设置为$scope变量和$emit('contentLoaded')
bounds-watcher指令正在侦听$scope.$on('contentLoaded', checkBounds);
function checkBounds(){ ... }启动$interval来轮询元素的维度

窗口调整大小？

如果您正在处理响应式布局，则可能需要在调整窗口大小以及指令首次加载时处理维度逻辑。在设置维度处理函数时，要考虑到它是值得的。

如何在我的情况下获得指令元素宽度

1 个答案: