(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>
try...catch
?$element
- это jqLite объект, события у него такие же как и у jQuery Объекта, каким боком тут$watch
который находится в$scope
?