28

div を中央に配置するディレクティブを作成しようとしています。

これまでのところ、私はこのコードを持っています:

app.directive("setcenter", function () {
    return {
        scope:{
            setcenter: '='
        },
        link: function (scope, element, attrs) {

            scope.$watch('setcenter', function (newValue) {
                if (newValue == true) {
                    var width = element.width();
                    element.css('position', 'absolute');
                    element.css('top', '80px');
                    element.css('left', '50%');
                    element.css('z-index', '200');
                    element.css('margin-left', '-' + width / 2 + 'px');
                }
            });
        }
    }
});

問題は要素の幅です。このディレクティブの要点は、このディレクティブを使用する div には幅が設定されていないということです。このディレクティブで幅を把握し、div を中央に配置したいと考えています。

私が遭遇する問題は、ディレクティブが呼び出されたときに、div の実際の幅がまだわかっていないことです。私の状況でこれを使用すると、div は 800px ですが、ページの読み込みが完了すると、div は 221px になります。

では、div の実際の幅がわかるまで待つにはどうすればよいでしょうか?

4

4 に答える 4

1

同様の問題があり、ページ上のすべての ng-ifs (または ngAnimate を使用するその他のもの) が解決されたときに寸法が確実に正しいことがわかりました - ここで同様のことが起こっている可能性があります。もしそうなら、これは新しいリスナーを追加せずにトリックを行います:

$scope.tryGetElementDimensions = function () {
    if (!angular.element("your-element") || ((angular.element("your-element")[0].classList).contains("ng-animate")
       $timeout(function() {
           $scope.tryGetElementDimensions()
       })
    }
    else {
        $scope.getElementDimensions()
    } 

$scope.getElementDimensions = function (){
    //whatever you actually wanted to do
}

link: function (scope, element, attrs) {
    $scope.tryGetElementDimensions()
}

Angular は、アニメーション中に ng-animate および ng-enter、ng-leave クラスを追加します。これらのクラスがすべて削除されると、アニメーションが終了したことを確信できます。2 番目の引数のない $timeout は、次のダイジェストを待つだけです。

于 2016-04-01T00:14:46.257 に答える
1

まだコメントできないので、この回答です。strom2357 が示唆しているような同様の解決策が見つかりました。$timeout は、DOM の準備ができたときに通知するのに非常にうまく機能し、非常にシンプルです。このソリューションを使用して、ui-view 要素の幅を取得しています。フィドルで見つけました。

var app = angular.module('app', []);

app.controller('MyController', function($timeout, $scope){

  $timeout(function(){
    //This is where you would get width or height of an element
    alert('DOM ready');
  });

  alert('DOM not ready');

});
于 2016-05-10T13:35:01.497 に答える