angularjs 앵귤러6 각도의 요소의 실제 너비는 언제 알 수 있습니까?




앵귤러6 (4)

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의 실제 너비가 알려질 때까지 무엇을 할 수 있습니까?


첫째, 링크 함수가 아닌 지시어에 대한 컨트롤러 를 정의 할 때만이 논리를 사용했습니다. 따라서 링크 함수에서이를 정의하는 것은 다른 행동을 유발할 수 있습니다.하지만 먼저 시도해 보시고 작동하도록 할 수 없다면 컨트롤러를 사용하도록 전환하십시오.

내가 말할 수있는 한,이 작업을 수행하기 위해 필요한 유일한 변경 사항은 범위 호출과 $ 요소를 $ scope로 변경하는 것입니다. 왜냐하면 종속성 삽입 객체가 표준 링크 함수 매개 변수가되기 때문입니다.

  $scope.getElementDimensions = function () {
    return { 'h': $element.height(), 'w': $element.width() };
  };

  $scope.$watch($scope.getElementDimensions, function (newValue, oldValue) {
    //<<perform your logic here using newValue.w and set your variables on the scope>>
  }, true);

  $element.bind('resize', function () {
    $scope.$apply();
  });

이 사용법에 대한 아이디어는 현재 요소가 아닌 $ 윈도우를 보는 것과 비슷한 유형의 사용법을 읽은 후에 나에게 왔습니다. 원래 작업은 여기에서 찾을 수 있습니다.

Angular.js : 페이지로드시 요소 높이 설정


제임스의 대답은 나를 이끌었습니다.

app.directive('measureInto', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function() {
                    return element[0].clientWidth;
                }, function(value){
                    scope[attrs.measureInto] = element[0].clientWidth + 10;
                });
            }
        };
    });

그래서, 런타임에, 나는 이것을 추가하고 내가 원하는 요소의 너비를 원하는 범위 변수로 할당한다.


아직 말할 수 없으므로이 답변을 참조하십시오. 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');

});

나는 유사한 문제가 있었고 페이지에서 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는 애니메이션 및 애니메이션을 추가하는 동안 클래스를 삭제하고 해당 클래스가 모두 제거되면 완료되었음을 확신 할 수 있습니다. 두 번째 인수가없는 $ timeout은 다음 다이제스트를 기다립니다.





angularjs-directive