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

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

[html]
<my-directive say="sayHello()"></my-directive>
[/html]

and inside directive:

[javascript]
{
say: ‘&’
}
[/javascript]

and now you can use it in isolated scope:

[javascript]
scope.say()
[/javascript]

And when you have method with param it’s little bit more tricky.

For example you have a method in a parent scope:

[javascript]
scope.sayHello = function(name){
//…
}
[/javascript]

in this case you should also specify it in the attribute:

[html]
<my-directive say="sayHello(name)"></my-directive>
[/html]

and for method call use specific format:

[javascript]
scope.say({name: ‘Alice’})
[/javascript]

Code is here.

Also highly recommend to watch episode from Egghead – Isolate Scope “&” .

[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]

Подготовительные действия

• ставим тест-драйвер Karma
• определяемся и подключаем к проекту тест-фреймворк (варианты Mocha, Jasmine)
• подключаем к проекту вспомогательную библиотеку angular-mocks

Написание сценария

подключаем Angular-модуль:

[javascript]beforeEach(module(‘myapp’));[/javascript]

подключаем шаблон (предварительно скомпилированный с помощью html2js):

[javascript]beforeEach(module(‘path/to/template’));[/javascript]

инжектим сервисы:

[javascript]
var $timeout, $rootScope;
beforeEach(inject(function(_$timeout_, _$rootScope_){
$timeout = _$timeout_;
$rootScope= _$rootScope_;
}));[/javascript]

прошу обратить внимание на нижнее подчеркивание, которое используется в Ангуляре для удобства и инжектит одноименный сервис.

либо инжектим инжектор и с помощью него уже получаем сервисы:

[javascript]
var $timeout, $rootScope;
beforeEach(inject(function($injector){
$timeout = $injector.get(‘$timeout’);
$rootScope= $injector.get(‘$rootScope’);
}));[/javascript]

для создания нового $scope делаем:

[javascript]
var $scope = $rootScope.$new()
[/javascript]

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

[javascript]
var element = $compile(‘<my-directive></my-directive>’)($scope);
[/javascript]

при этом не забываем инжектить сервис $compile

получение изолированного $scope:

[javascript]
var isolatedScope = element.children().scope()
[/javascript]

либо (работает начиная с версии 1.2):

[javascript]
var isolatedScope = element.isolateScope()
[/javascript]

чтобы запустить все колбэки в таймАут-сервисах:

[javascript]
$timeout.flush()
[/javascript]

чтобы промисы внутри приложения отрезолвились необходимо вручную делать:

[javascript]
scope.$apply();
[/javascript]

если что-то забыл – пиши в комментариях – дополню.

UPD:

подмена сервисов (замена мок-вариатом):
[javascript]
beforeEach(module(function ($provide){
$provide.service(‘SameNameWithRealService’, function(){
//код вашего мок-сервиса
});
}));
[/javascript]

использование “шпионов” для проверки вызова методов:
[javascript]
//переопределение внутреннего метода
$scope.someMethod = sinon.spy();
//вызов внешнего метода, который должен вызвать первый
$scope.someOtherMethod()
//проверка
expect($scope.someMethod.called).equal(true);
[/javascript]
 

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

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

app.directive(directives)

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

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

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

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

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

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

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

Предистория:

В проекте (на AngularJS) стала задача вывести список сущностей, каждая из которых имеет свойства и представление (директивы). Но сложность заключается в том, что сущности могут буть разных типов, совершенно разных: с различным представлением и поведением. Вопрос: “что делать, если хочется все вывести через ng-repeat?”. Одну директиву в духе god-antipattern, где будет сразу все возможные варианты поведения и отображения, лепить не хотелось. Хотелось использовать разные, чтобы потом еще можно было делать новые и они автоматически подхватывались. Но как их подгружать?

Решение:

Для динамической сборки директивы нам нужен сервис $compile. В итоге получилось такое( выкладываю упрощенный вариант):

html:

<div ng-repeat="item in items">
  <itemDirective></itemDirective>
</div>

а внутри директивы itemDirective:

element.append($compile(angular.element('<' + $scope.item.type + '/>'))($scope));

После чего пришла мысль “а почему бы это не оформить в виде директивы, которая будет подгружать в себя в зависимости от параметра другую директиву“.

И код преобразился следующим образом:

<div ng-repeat="item in items">
  <itemDirective ng-directive="{{item.type}}"></itemDirective>
</div>

А в директиве:

element.append($compile(angular.element('<' +  attrs.ngDirective + '/>'))($scope));

attrs.$observe('ngDirective', function(directive) {
    element.html('');
    element.append($compile(angular.element('<' + directive + '/>'))($scope));
});

Вот код и демо.

Очень бы хотелось услышать конструктивную критику.

Идея пришла под вдохновлением от прочтения этой статьи.

UPD: как подсказали в сообществе:

1. лучше не смешивать логику с представлением(хранить имя директивы в контролере)
2. следить за утечками памяти, ибо в данном случае новая директива создает много вотчеров, которые потом никто не зачищает
3. использовать для данной задачи ngSwitch