AngularJS: How to pass a method into an isolated scope

I came to conclusion that it’s not very obvious how to pass a method into an isolated scope. And that’s why my junior AngularJS developers just do direct call:

[javascript]
$scope.$parent.methodOfParentScope();
[/javascript]

but it’s more like a hack. It’s more correct to pass it via attribute:

Continue reading

AngularJS Directive attribute binding options

This example explicitly shows the difference between directive attribute binding types. Let’s say you have directive:

[javascript]
function myDirective() {
return {
scope: {
x: ‘@’, // String, interpolated with {{ }}
y: ‘=’, // Expression
z: ‘&’ // Function
}
};
}
[/javascript]

it means that you will do such operations with attributes to pass the directive:

[javascript]
function MyDirectiveController($scope, $element, $attrs, $interpolate, $parse) {
$attrs.$observe(‘x’, function(value) {});
$interpolate($attrs.x)($scope);
$scope.$eval($attrs.y);
var fn = $parse($attrs.z);
$element.on(‘click’, function() {
fn($scope);
});
}
[/javascript]

AngularJs: альтернативный синтаксис регистрации директив

Вместо привычного нам:

app.directive('directiveName', function() { ...

можно использовать групповой синтаксис:

app.directive(directives)

где directives – объект содержащий в себе директивы (ключ – название директивы, значение – функция конструктор).

Может быть удобно для использования пространства имен (namespaces):

User.directives = {};
User.directives.myDirective = function () { ...
angular.directive(User.directives);

данный синтаксис работает также и для контроллеров.

AngularJS: Использование контроллера директивы в другой директиве

Опция require в описании директивы дает нам возможность использовать контроллер другой директивы. Мы также можем указать массив контроллеров.

Объяснение можно посмотреть на egghead.io, код можно взять тут.

Важно: если поставить в начале значения символ ‘^’,  то интерпретатор будет пытаться найти контроллер директивы в родительских элементах. Если не поставить – только на текущем елементе(как это было в примере на egghead.io).

ngDirective – директива для загрузки директив

Суть:

директива типа “атрибут”, значением идет имя поддирективы, которую необходимо динамически подгрузить. Может быть удобно в случае, когда в зависиомти от условия мы должны выводить различные компоненты.

Continue reading