получить высоту div div с помощью angularjs

0

Это моя директива. Я получаю значение консоли ("привет") в моей консоли, но я не получаю высоту или ширину div, к которым я добавил изменение директивы

'use strict';
 app.directive('resize', function ($window) {

    console.log("hello");
    return function (scope, element) {
        restrict: 'E'
        var w = angular.element($window);
        console.log(w);

        scope.getWindowDimensions = function () {
            return {
                'h': w.height(),
                'w': w.width()
            };
        };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;
            console.log(scope.windowHeight);
            console.log(scope.windowWidth);   

            scope.style = function () {
                return {
                    'height': (newValue.h - 100) + 'px',
                    'width': (newValue.w - 100) + 'px'
                };
            };

        }, true);

        w.bind('resize', function () {
            console.log(w.bind())
            scope.$apply();
        });
    }
})

ниже в моем div

 <div data-ng-show="GameHeaderScreen.Start" class="head" ng-style="style()" id="playid" resize>window.height: {{windowHeight}}
    <br />window.width: {{windowWidth}}
  • 0
    это не то, как вы объявляете директиву.
  • 0
    Наблюдение запускается при вызове scope.$digest() и при изменении значения наблюдаемой переменной. Дайджест не вызывается при изменении размера элемента. Так что вы не можете следить за изменением ширины в $watch
Показать ещё 1 комментарий
Теги:
angularjs-directive

1 ответ

1

Вы должны следовать шаблону директивы, который требует функции ссылки.

Кроме того, вам нужно отменить прослушивание в окне, когда область действия будет уничтожена.

app.directive('resize', function ($window) {

      var w = angular.element($window);
      console.log(w);

      return {
          restrict: 'E',

          // declare a link function
          link: function(scope,element) {

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

             scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
                  scope.windowHeight = newValue.h;
                  scope.windowWidth = newValue.w;

                  scope.style = function () {
                      return {
                         'height': (newValue.h - 100) + 'px',
                         'width': (newValue.w - 100) + 'px'
                      };
                  };
              }, true);

              var resize = w.bind('resize', function () {
                  scope.$apply();
              });

              // remove the global event!!
              scope.$on('$destroy', function() {
                  w.unbind('resize');
              });
          }
      }
}

});
Поделиться
  • 0
    @shank Я нахожусь в процессе публикации угловой библиотеки, которая обрабатывает события изменения размера как ваш пример: github.com/thinkingmedia/thinkingmedia-ui
  • 0
    @shank попробуйте это: learn-angular.org
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню