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

1 ответ 1

1

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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