Tag Archives: директива

Директивы для обработки DOM-событий в AngularJS

Всё достаточно просто, много раз использовал, но надо бы и здесь выложить. Допустим, нам нужно вешать AngularJS-обработчики на DOM-события mouseenter и mouseleave. Для этого пишем генератор директив по массиву:

var directives = angular.module('CommonDirectives', []);

angular.forEach(['Mouseenter', 'Mouseleave'], function (eName) {
	var aName = 'mm' + eName,
		eName = eName.toLowerCase();
	directives.
		directive(aName, ['$parse', function($parse) {
			return {
				restrict: 'A',
				link: function link($scope, $element, attrs) {
					var fn = $parse(attrs[aName]);
					$element.bind(eName, function ($event) {
						$scope.$apply(function () {
							fn($scope, {$event: $event});
						});
					});
				}
			};
		}]);
});

var directives = angular.module('CommonDirectives', []);

angular.forEach(['Mouseenter', 'Mouseleave'], function (eName) {

var aName = 'mm' + eName,

eName = eName.toLowerCase();

directives.

directive(aName, ['$parse', function($parse) {

return {

restrict: 'A',

link: function link($scope, $element, attrs) {

var fn = $parse(attrs[aName]);

$element.bind(eName, function ($event) {

$scope.$apply(function () {

fn($scope, {$event: $event});

});

}

};

}]);

});

Ну и можно добавлять названий дректив по вкусу. Использование:

<li
	ng-repeat="gift in selectedGroup.gifts"
	ng-class="{'selected': gift.id == selectedGift.id, 'hovered': gift.id == hoveredGift.id}"
	ng-click="selectGift(gift)"
	mm-mouseenter="hoveredGift = gift)"
	mm-mouseleave="hoveredGift = undefined"
>
	<div class="gift-container">
		<b class="{{gift.key}}"></b>
	</div>
</li>

<li

ng-repeat="gift in selectedGroup.gifts"

ng-class="{'selected': gift.id == selectedGift.id, 'hovered': gift.id == hoveredGift.id}"

ng-click="selectGift(gift)"

mm-mouseenter="hoveredGift = gift)"

mm-mouseleave="hoveredGift = undefined"

</div>

</li>

Результат — http://grab.by/tXHy. Таким же образом можно делать директивы для любых событий: focus, blur, keypress …

AngularJS: директива для вставки html выполнением всех скриптов

Допустим, мы получаем с сервера код вида

<script>alert(1234)</script><script type="text/javascript">alert(12345)</script>
<script type="asdf">alert(1234)</script><script src="/js/alert.js">alert(1234)</script>
<span style="color: red;">1234</span>

и хотим его вывести в шаблоне. Для обычного вывода с парсингом html-тегов достаточно

<div ng-bind-html="ad.html | trustAsHtml"></div>

1	<div ng-bind-html="ad.html \| trustAsHtml"></div>

Но, к примеру, jQuery умеет выполнять все скрипты, которые есть в строке ad.html. AngularJS такого из коробки не умеет. Поэтому была написана директива bind-html-with-js, используется она также:

<div ng-bind-html="ad.html | trustAsHtml"></div>

1	<div ng-bind-html="ad.html \| trustAsHtml"></div>

При этом все скрипты, и …

AngularJS: особенности ng-switch (и, возможно, ng-if)

Элементы с директивой ng-switch-when(ng-switch-default) вставляются в конец DOM. И поэтому, к примеру, список будет выводиться не в том порядке, как это задумано. В таких случаях лучше использовать ng-show/ng-hide

<div ng-app ng-controller="MyCtrl">{{val}}
<ul ng-switch="val">
<li>1</li>
<li ng-switch-when="1">2</li>
<li>3</li>
</ul>
</div>

<div ng-app ng-controller="MyCtrl">{{val}}

</ul>

</div>

AngularJS Unknown provider: $scopeProvider <- $scope <- selectorDirective

Такая ошибка может возникнуть при создании новой директивы, особенно при выносе контроллера в директиву. Скорее всего, она возникла из-за того, что была объявлена зависимость от $scope, например:

directives.directive('selector', [<strong>'$scope'</strong>, 'GeoSelect', function selectorGeoExtended(<strong>$scope</strong>, GeoSelect) {
	return {
		restrict: 'AE',
		replace: true,
		scope: {},
		template: '<div></div>',
		link: function ($scope) {
			// @debug
			console.log($scope);
		}
	};
}]);

directives.directive('selector', [<strong>'$scope'</strong>, 'GeoSelect', function selectorGeoExtended(<strong>$scope</strong>, GeoSelect) {

return {

restrict: 'AE',

replace: true,

scope: {},

template: '<div></div>',

link: function ($scope) {

// @debug

console.log($scope);

}

};

}]);

Объявление директивы нужно заменить на

directives.directive('selector', ['GeoSelect', function selectorGeoExtended(GeoSelect) {

1	directives.directive('selector', ['GeoSelect', function selectorGeoExtended(GeoSelect) {

Watch angular attrs and scope

attrs.$observe и $scope.$parent.$watch Подробнее:

ng-options в Angular.js

Который раз натыкаюсь на эти грабли, и который раз забываю. Чтобы заработало ng-options и вообще много чего с селектами, нужно обязательно указать модель для селекта (<select name=»{{name}}» ng-model=»day» class=»…»>), без этого работать не будет, т.к. (отрывок из исходников angular.js):

      // if ngModel is not defined, we don't need to do anything
      if (!ctrls[1]) return;

1 2	// if ngModel is not defined, we don't need to do anything if (!ctrls[1]) return;

Видео о директивах в AngularJS

Сколько уже раз забываю написать про хорошие видео о директивах: Тонкости написания директив от создателя AngularJS (Misko Hevery) http://youtu.be/WqmeI5fZcho Тестирование директив (Vojta Jina) http://youtu.be/rB5b67Cg6bc