0

(function() {
  'use strict';

  angular.module("app")
    .directive('myDirective', [getmyDirective]);

  function getmyDirective() {
    try {
      var directiveDefinitionObject = {
        template: '<dir class="myDirective" ></dir>',
        replace: true,
        transclude: false,
        restrict: 'AE',
        scope: false,
        controller: function($scope, $element, $attrs) {
          $scope.$watch(function() {
              return document.documentElement.clientWidth;
            },
            function(newValue, oldValue) {
              SetSize();
            }
          );

          function SetSize() {
            $scope.width = $element.width();
          }
        },
        compile: function compile(tElement, tAttrs, transclude) {
          return {
            pre: function preLink(scope, iElement, iAttrs, controller) {},
            post: function postLink(scope, iElement, iAttrs, controller) {
              setTimeout(function() {
                scope.SetSize();
              }, 1000);

            }
          }
        },
      }
      return directiveDefinitionObject;
    } catch (e) {
      console.log(e);
    }
  }
})();

Мне необходимо получить ширину блока, занимаемого директивой $scope.width. В свойствах блока ширина равна 100% родительского блока.

Изначально, после загрузки сайта директива на странице отсутствует. После загрузки она имеет свойство display:hidden (находится под спойлером).

Как видно из кода, измерение ширины производится как можно позже, через 1 сек после того как срабатывает compile postlink. Тем не менее, результат измерения $scope.width=100.

При изменении размеров окна, после того как директива стала видимой,

$scope.$watch(function() { return document.documentElement.clientWidth; })

измерение $scope.width дает реальный результат.

Вопрос: Какие существуют события $element, на которые можно было бы повесить $watch, чтобы отследить реальную ширину директивы? Где это можно прочитать? Решение вешать события на $('.myDirective') не подходят, директива используется многократно, размеры элементов разные.

Передавать внешний параметр - тоже не подходит. Ширину элемента должна определить сама директива.

Пример:

var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.isOpen = false;
});
app.directive('myDirective', [ getmyDirective]); 
function getmyDirective(){
	var directiveDefinitionObject = {
	template: '<dir class="myDirective" ><dir ng-style="dstyle[size]">window1 {{width}}</dir><dir ng-style="dstyle[size]">window2 {{size}}</dir></dir>',
	replace: true,
	transclude:false,
	restrict: 'AE',
	scope: false,
	controller: function($scope, $element, $attrs ) {
		$scope.$watch(function() { return document.documentElement.clientWidth; },
			function(newValue, oldValue) {
				SetSize();
			}
		);
		$scope.SetSize = SetSize;
		$scope.dstyle = [
				{ 'width': '25%' , 'float': 'left'},
				{ 'width': '100%' }
			];
		function SetSize(){
			$scope.width = 
		//	150;
			$element.width() ; 
			$scope.size= ($scope.width > 200 )? 0: 1;
		}
	},
	compile: function compile(tElement, tAttrs, transclude) {
		return {
			pre: function preLink(scope, iElement, iAttrs, controller) {},
			post: function postLink(scope, iElement, iAttrs, controller) {
				setTimeout(function(){
					scope.SetSize();
				},1000);
		
			}
		}
	},
	}
	return directiveDefinitionObject;
}
.container { width: 100vw}
	.inside {width: 100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<body>

	<div ng-app="myApp" ng-controller="personCtrl">

		<button ng-click="isOpen=!isOpen" >Open</button>
		<div ng-if="isOpen"  class="container">
			<div data-my-directive  class="inside"></div>
		</div>

	</div>

</body>
</html>

7
  • а зачем тело директивы в try...catch?
    – Grundy
    25 июл 2016 в 7:26
  • $element - это jqLite объект, события у него такие же как и у jQuery Объекта, каким боком тут $watch который находится в $scope?
    – Grundy
    25 июл 2016 в 7:28
  • try...catch - на всякий случай, это не принципиально. Проект пока в разработке и так удобнее отлавливать ошибки.
    – Dolalex
    25 июл 2016 в 7:33
  • без примера абсолютно непонятно что делает данная директива и в чем заключается проблема, которую непонятно как пытаешься решить
    – Grundy
    25 июл 2016 в 7:35
  • надо запустить функцию setSize в тот момент, когда элемент будет иметь конкретную ширину. Вызов в $watch $element.width() вызывает ошибку, т.к. в определенный моменты $element не существует
    – Dolalex
    25 июл 2016 в 7:36

1 ответ 1

1

Из беседы с @Grundy пришло решение: Проблема состояла в том, что директива, скрытая посредством jQuery не имела собственной ширины. Поэтому "оживление" директивы следовало накладывать не на ее саму, а на элемент jQuery. В данном случае использовался аккордеон. На панель аккордеона была наложена функция на событие ng-click, вызывающее apply (как именно вызывается apply описывать не буду, т.к. я это делаю не лучшим способом) с небольшой (100ms) временной задержкой, чтобы jQuery успел открыть элемент и задать ему ширину.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.