jquery - 指令宽度(以像素为单位)

Question

我一直在尝试确定我在其上声明指令的元素的宽度。

这是我的指令链接函数:

link: function (scope, elem, attrs) {
    var width = elem.width();
    scope.zoom = width / 674;
}

元素的宽度是父元素宽度的 100%。当整个页面完成加载和渲染(包括此指令)时，我试图获取元素的宽度。我可以在我的元素检查器中看到它最终确实定义了以像素为单位的宽度，只是不在我的 Angular 过程的任何阶段。

任何帮助将不胜感激。

注意:我已经使用 $timeout 尝试了许多不同的方法，但它们都没有将过程延迟足够长的时间以便以像素为单位设置宽度。

更新 1:

我错误地认为我正在使用ui-router。我显然使用 Angular 的 ngRoute。 (我真的应该知道这些事情，我的错)。

无论如何，到目前为止所提出的解决方案都没有产生糟糕的结果。甚至一些关于 jQuery 的官方文档也没有像他们想象的那么简洁，所以我想我会分享更多我的代码，希望能找出问题所在。

这是我最近尝试后的完整指令:

(function () {
    'use strict';

    angular.module('app.widgets').directive('pagePreview', pagePreviewer);

    pagePreviewer.$inject = ['$window'];

    function pagePreviewer($window) {
        return {
            transclude: true,
            restrict: 'A',
            link: function (scope, elem, attrs) {
                scope.$on('$viewContentLoaded', function () {
                    scope.zoom = elem[0].clientWidth / 674;
                });

                //watch window resize
                angular.element($window).bind('resize', function () {
                    scope.zoom = elem[0].clientWidth / 674;
                    scope.$apply();
                });
            },
           templateUrl: 'app/widgets/pagePreviewer/pagePreviewer.html'
        }
    }
})();

调整大小功能工作正常，但 $viewContentLoaded 事件永远不会触发。

我的模板如下:

<div>
    <style>
        .ft-page-container{
            position: relative;
            width:100%;
            padding-bottom:141%;
            border: 1px solid rgba(0, 0, 0, 0.25);
            box-shadow: 3px 3px 8px 1px rgba(0, 0, 0, 0.1);
        }
        .ft-page-container .ft-page{
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background-color: white;
            padding: 12% 14%;
        }
    </style>
    <div class="ft-page-container">
        <div data-ng-transclude class="ft-page" style="zoom: {{zoom}}; -moz-transform: scale({{zoom}});">
            <!-- Html gets injected here -->
        </div>
    </div>
</div>

我在 ngView 中使用该指令，在以下上下文中:

<!-- Preview -->
<div>
    <div id="invoice-template-preview" page-preview class="col-lg-offset-9 col-lg-3">
        Test
    </div>
</div>

我觉得我正在做一些非常基本的错误，因为获取指令上计算的 CSS/尺寸不可能这么难。特别是因为遵循 Angular 方式告诉您始终在指令中进行 DOM 操作，这通常严重依赖于所述计算值。

Answer 1

试试这个 - 您要检查的实际元素是包含的 elem 中的第一个对象。唯一的缺点是当报告宽度时，它不包括边框的 2 像素(每边 1 像素)。我将其放入 $timeout 中以确保它已渲染，但从技术上讲可能没有必要。

angular.module('app', [])
  .directive('myDirective', function($timeout) {
    return {
      link: function(scope, elem, attrs) {
        $timeout(function() {
          console.log(elem[0].clientWidth)
        });
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div style="width:100%; height: 50px; border: 1px solid black;" my-directive></div>
</div>