проблема объема, вызывающая функцию директивы angularjs

0

У меня есть следующий контроллер и декларация директивы.

<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)], запрашивающий новую/выделенную область действия:

  • 0
    «Как подключить контроллер документов для вызова метода в директиве». - Уточните это, пожалуйста. Я чувствую, что вы пытаетесь сделать что-то не так. Короткий ответ: вы никогда не вызываете директивные методы.
  • 0
    директива владеет dropzone, поэтому для вызова соответствующего метода в принадлежащей dropzone необходимо вызвать метод директивы
Теги:

1 ответ

1
Лучший ответ

Директивы с изолированными областями должны быть на дочернем элементе из элементов с директивой 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';
      };
  })

ДЕМО на PLNKR.

  • 0
    это отличный ответ, спасибо.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню