Category Archives: Angular.js

AngularJS: особенности пробрасывания объектов в директиву

Есть у меня директива такого плана:

<div my-selector initial-value="{a: 1}"></div>

1	<div my-selector initial-value="{a: 1}"></div>

Хотелось бы отслеживать изменения в директиве. Вот так она выглядит:

directive('fbFieldObjectSelector', ['$rootScope', function ($rootScope)
{
	return {
		restrict: 'A',
		scope: {
			initialValue: '='
		},
		template: 'div',
		link: function link($scope, $el, attrs)
		{
			...

directive('fbFieldObjectSelector', ['$rootScope', function ($rootScope)

{

return {

restrict: 'A',

scope: {

initialValue: '='

template: 'div',

link: function link($scope, $el, attrs)

{

...

Самый простой способ:

$scope.$watch('initialValue', function (initialValue) {
	// @debug                                             
	console.log(initialValue);                            
	$scope.selectProduct(initialValue);                   
});

$scope.$watch('initialValue', function (initialValue) {

// @debug

console.log(initialValue);

$scope.selectProduct(initialValue);

});

он не работает, ошибка Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Второй способ:

$scope.$watch('initialValue', function (initialValue) {
	// @debug                                             
	console.log(initialValue);                            
	$scope.selectProduct(initialValue);                   
}, true);

$scope.$watch('initialValue', function (initialValue) {

// @debug

console.log(initialValue);

$scope.selectProduct(initialValue);

}, true);

и третий способ:

$scope.$watchCollection('initialValue', function (initialValue) {
	// @debug
	console.log(initialValue);
	$scope.selectProduct(initialValue);
});

$scope.$watchCollection('initialValue', function (initialValue) {

// @debug

console.log(initialValue);

$scope.selectProduct(initialValue);

});

работают, но тоже выдают ошибку: Error: [$compile:nonassign] Expression ‘{a: 1}’ used with directive ‘fbFieldObjectSelector’ is …

Директивы для обработки 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 …

Promise и AngularJS

http://youtu.be/XcRdO5QVlqE Слайды — http://christianlilley.wordpress.com/2014/01/17/slides-im-postal-for-promises-in-angular-delivered-at-ng-conf-2014/. Более развёрнутые слайды с другой его конференции — http://christianlilley.wordpress.com/2013/09/19/promises-promises-mastering-async-io-in-javascript-with-the-promise-pattern/.

Тонкости создания большого приложения на AngularJS

Разработчики из DoubleClick рассказывают об особенностях создания большого приложения на AngularJS http://youtu.be/62RvRQuMVyg Интересное: Авторизация — профиль пользователя лучше передавать с сервера и сделать внедряемую константу (хотя лично я храню всё в localStorage) Скрытие/отображение фич можно сделать по списку доступных фич текущего профиля. Наиболее эффективно распарсивать и вырезать куски шаблона на этапе загрузки через responseInterceptor — …

История создания AngularJS

Разговор о том, как, для чего и кем AngularJS создавался и создаётся. http://youtu.be/r1A1VR0ibIQ

Что такое AngularJS

Основы AngularJS за 20 минут. Для того, чтобы понять, что это такое, и самые простые вещи, которые можно сделать с его помощью. http://youtu.be/tnXO-i7944M

Конференция по AngularJS

16-17 января 2014 года в Солт-Лэйк-Сити (США) прошла конференция по AngularJS. Вот сайт конференции — http://ng-conf.org/ Вот видео с докладов — http://www.youtube.com/user/ngconfvideos Далее буду выкладывать видео докладов со своими комментариями

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>

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

Grunt-таск для замены ng-include на код шаблонов

Чтобы не делать лишних запросов на production, здесь решили вставить подключаемый шаблон напрямую: https://github.com/mgcrea/grunt-nginclude

Loading bar-сервис для AngularJS

Всё сделано через interceptors, всё «по-умному». http://chieffancypants.github.io/angular-loading-bar/ Мне, правда, аткой вариант не подходит (я про интерсепторы), уж очень он сильно ограничивает.