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 …

Пример работы с ng-class в Angular.js

Два способа менять класс в зависимости от условия:

ng:class="{true:'<название класса>', false:''}[$index==selectedIndex]"

1	ng:class="{true:'<название класса>', false:''}[$index==selectedIndex]"

ng-class="{<название класса>: $index==selectedIndex}"

1	ng-class="{<название класса>: $index==selectedIndex}"

Подробнее: http://stackoverflow.com/questions/7792652/what-is-the-best-way-to-conditionally-apply-a-class-with-angularjs А то в официальных доках на эту тему не густо(

Tag Archives: directives

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

Пример работы с ng-class в Angular.js

Подробно о директивах в AngularJS

Директивы для Angular.js