У меня есть следующий контроллер и декларация директивы.
<div ng-controller="DocumentController as dc" data-drop-zone url="api/document/upload">
Как подключить контроллер документа к вызову метода в директиве.
<button ng-click="dc.start()" />
drop-zone - машинопись, определяемая следующим образом.
export class DocumentDropZone implements ng.IDirective {
url: string;
constructor(public $log, public $compile) {
}
public start(): void {
this.$log.log('start processing files...');
}
public link: Function = (scope: any, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => {
this.$log.log('initialising drop zone');
... // left out for brevity.
Контроллер документа прост.
class DocumentController
{
static $inject = ['$log'];
constructor(public $log: ng.ILogService) {
}
public start(): void {
// CALL THE DIRECTIVE "start" METHOD SOMEHOW...
this.$log.log('start uploading files');
}
}
Если я попытаюсь использовать изолированную область действия в директиве, я получаю сообщение об ошибке:
Несколько директив [ngController, dropZone (модуль: panda)], запрашивающий новую/выделенную область действия:
Директивы с изолированными областями должны быть на дочернем элементе из элементов с директивой ng-controller
.
<div ng-controller="DocumentController as dc" >
<div my-directive command="dc.myDirCommand">
</div>
</div>
Директива ng-controller
использует унаследованную область. Директива с изолированной областью должна быть на другом элементе.
Из Документов:
В общем случае можно применить несколько директив к одному элементу, но могут быть ограничения в зависимости от типа области действия, требуемой директивами. Следующие пояснения помогут объяснить эти ограничения. Для простоты учитываются только две директивы, но она также применима для нескольких директив:
- no scope + no scope => Две директивы, не требующие собственной области, будут использовать свою родительскую область
- child scope + no scope => В обеих директивах будет использоваться один единственный дочерний объект
- child scope + child scope => Обе директивы будут разделять одну область с одним дочерним узлом
- изолированный scope + no scope => Отдельная директива будет использовать ее собственную созданную изолированную область. Другая директива будет использовать свою родительскую область
- изолированная область видимости + дочерняя область => Не будет работать! Только один объект может быть связан с одним элементом. Поэтому эти директивы не могут применяться к одному элементу.
- изолированный объем + изолированный объем => Не будет работать! Только один объект может быть связан с одним элементом. Поэтому эти директивы не могут применяться к одному элементу.
- Справочное руководство по API полной версии AngularJS - Область применения
Команды могут быть отправлены в изолированную директиву с односторонними привязками и крючком $onChanges
.
app.directive("myDirective", function () {
return {
scope: { command: '<' },
bindToController: true,
controllerAs: "$ctrl",
controller: function() {
this.$onChanges = function(changes) {
if ( changes.command.currentValue === 'start'
) {
console.log(changes);
this.start();
}
};
this.start = function() {
console.log("Directive start invoked");
this.started = true;
};
},
template: '<p ng-if="$ctrl.started">Directive Started</p>'
};
});
Контроллер:
app.controller('DocumentController', function() {
var dc = this;
dc.startDirective = function() {
console.log("Start button clicked");
dc.myDirCommand = 'start';
};
})