在指令的链接功能中使用 typescript angularjs 指令的控制器和其他继承控制器，

Question

我正在 typescript 中编写以下 angularjs 指令以进行表单验证。我想弄清楚，如何在指令的链接函数中使用指令的控制器和表单继承控制器。

TH 进阶了

module app.infrastructure.components.forms {
'use strict';

interface MyIFormController extends ng.IFormController {
    $name: string;
}

interface IMskFormInputController {
    setupDom: (element: any) => string;
    addMessages: (form: ng.IFormController, element: ng.IAugmentedJQuery, name: string, scope: ng.IScope) => void;
    updaterFor: (element: ng.IAugmentedJQuery) => any;
    watcherFor: (form: ng.IFormController, name: string) => any;
}

class MskFormInputController implements IMskFormInputController {

    static $inject = ['$compile'];
    constructor(private $compile: ng.ICompileService) {
    }

    setupDom(element: any): string {
        var name = null;

        var input = element.querySelector("input, textarea, select, ui-select");

        if (input !== undefined && input) {
            name = input.getAttribute("name");
        }

        return name;
    }

    addMessages(form: any, element: ng.IAugmentedJQuery, name: string, scope: ng.IScope): void {

        var messages = "<div class='help-block' ng-messages='" + form.$name + "." + name + ".$error" + "'>" +
            "<div ng-messages-include='/app/infrastructure/directives/forms/messages.html'></div>" +
            "</div>";
        element.append(this.$compile(messages)(scope));
    }

    updaterFor(element: ng.IAugmentedJQuery): any {
        return function (hasError) {
            if (hasError) {
                element.addClass("has-error");
            }
            else {
                element.removeClass("has-error");
            }
        }
    }

    watcherFor(form: ng.IFormController, name: string): any {
        return function () {
            if (name && form[name]) {
                return form[name].$invalid;
            }
        };
    }

}

class MskFormInput implements ng.IDirective {

    constructor() { }

    static factory(): ng.IDirective {
        return new MskFormInput;
    }

    controller = MskFormInputController;
    controllerAs = 'mskFormInputController';
    restrict = 'A';
    require = ['^form'];
    scope = {};
    link(scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any): void {

        //var name = form.setupDom(element[0]);
        //this.controller.addMessages(form[0], element, name, scope);
        //scope.$watch(this.controller.watcherFor(form[0], name), this.controller.updaterFor(element));

    }
}

angular
    .module('app.infrastructure.components.forms.mskFormInputDrtvmdl')
    .directive('mskFormInput', MskFormInput.factory);

}

Answer 1

开始吧：我相信这个问题一定要打上[angularjs]的标签。

第一：指令和控制器之间的通信应该是通过范围。 第二：避免在控制器中操作 DOM，在指令中这样做。

在此代码中看不到任何需要控制器，since their responsibility is to manipulate the data and scope behavior。

寻找学习 angularjs 的基础知识，了解该英雄框架的每个小部分之间的责任和差异查看更多 here 和 here。要知道用打字稿代码写出更好的 angularjs，watch this

以下是这些规则的重构代码：

module app.infrastructure.components.forms {
  'use strict';

  MskFormInput.$inject = ['$compile']
  function MskFormInput($compile: ng.ICompileService): ng.IDirective {

  var setupDOM = (element: HTMLElement) => {
    var name = null;

    var input = element.querySelector("input, textarea, select, ui-select");

    if (input !== undefined && input) {
      name = input.getAttribute("name");
    }

    return name;
  };

  var addMessages = (element: ng.IAugmentedJQuery, form: any, name: string, scope) => {
    var messages =
      `<div class="help-block" ng-messages="${form.$name}.${name}.$error">
         <div ng-messages-include='/app/infrastructure/directives/forms/messages.html'></div>
      </div>`;
    element.append(this.$compile(messages)(scope));
  };

  var invalidForm = (form: ng.IFormController, name: string) => {
    return function() {
      if (name && form[name]) {
        return form[name].$invalid;
      }
    };
  };

  return {
    restrict: 'A',
    require: ['^form'],
    scope: {},
    link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
      var name = setupDOM(m);
      var form = element[0].form;

      if (!form)
        return;

      addMessages(form, element, name, scope);

      scope.$watch(invalidForm(form, name), (hasError) =>
        element.toggleClass('has-error', hasError)
      );
      }
    };
  }

  angular
    .module('app.infrastructure.components.forms.mskFormInputDrtvmdl')
    .directive('mskFormInput', MskFormInput);
}