Question

我有以下控制器和指令声明。

<div ng-controller="DocumentController as dc" data-drop-zone url="api/document/upload">

如何连接文档控制器以调用指令上的方法。

<button ng-click="dc.start()" />

drop-zone是typescript，定义如下。

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（module：panda）]问对于新的/隔离的范围：

Answer 1

具有隔离范围的指令需要位于具有ng-controller指令的元素的子元素上。

<div ng-controller="DocumentController as dc" >

  <div my-directive command="dc.myDirCommand">
  </div>

</div>

ng-controller指令使用继承范围。具有隔离范围的指令需要位于不同的元素上。

来自文档：

通常，可以将多个指令应用于一个元素，但可能存在一些限制，具体取决于指令所需的范围类型。以下几点有助于解释这些限制。为简单起见，只考虑了两个指令，但它也适用于几个指令：


无范围 + 无范围 =＆gt;两条不需要自己范围的指令将使用其父母的范围

子范围 + 无范围 =＆gt;这两个指令将共享一个子子范围

子范围 + 子范围 =＆gt;这两个指令将共享一个子子范围

隔离范围 + 无范围 =＆gt; Isolated指令将使用它自己创建的隔离范围。另一个指令将使用其父级的范围

隔离范围 + 子范围 =＆gt; 无法工作！只有一个范围可以与一个元素相关。因此，这些指令不能应用于同一元素。

隔离范围 + 隔离范围 =＆gt; 无法工作！只有一个范围可以与一个元素相关。因此，这些指令不能应用于同一元素。

- AngularJS Comprehensive Directive API Reference -- Scope

可以使用单向绑定和$onChanges挂钩将命令发送到isolated指令。

  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';
      };
  })

DEMO on PLNKR。

范围问题调用angularjs指令函数

1 个答案: