指令寬度，以像素為單位

Question

我一直試圖確定一個元素的寬度，我正在聲明一個指令。

這是我的指令鏈接功能：

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

元素的寬度是父元素寬度的100％。 我正在嘗試獲取整個頁面加載和渲染完成后元素的寬度，包括此指令。 我可以在我的元素檢查器中看到它最終確定寬度（以像素為單位），而不是在我的角度處理的任何階段。

任何幫助將不勝感激。

注意：我已經嘗試了許多使用$ 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'
        }
    }
})();

resize函數工作正常，但$ 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的第一個對象。 唯一的缺點是，當報告寬度時，它不包括邊界的2px（每邊1px）。 我把它設置為$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> 

Answer 2

這里是一個工作plnkr的嘗試，以實現（ 例如調用第1頁 ）內容。 當$viewContentLoaded被觸發時以及$window size更改時， $scope.zoom將被更新。

State1視圖

<div>
     <div>
         <h1>Page 1 content goes here...</h1>
        <div class="outer">
          <div class="inner" sizer>
             {{ zoom }}
          </div>
      </div>
     </div>
</div>

AngularJS應用程序

var myApp = angular.module("myApp", ['ui.router']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when("", "/PageTab");

    $stateProvider
        .state("PageTab", {
            url: "/PageTab",
            templateUrl: "PageTab.html"
        })
        .state("PageTab.Page1", {
            url: "/Page1",
            templateUrl: "Page1.html"
        })
        .state("PageTab.Page2", {
            url: "/Page2",
            templateUrl: "Page2.html"
         })
        .state("PageTab.Page3", {
            url: "/Page3",
            templateUrl: "Page3.html"
        });
});

myApp.directive('sizer', function($window) {
        return {
            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();
              });
            }
        };
    });