Question

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

先进的

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操作，在指令中执行此操作。

在此代码{@ 3}}中看不到需要控制器。

寻找研究angularjs的基础知识，了解该英雄框架的每个小部分之间的责任和差异查看更多since their responsibility is to manipulate the data and scope behavior和here。并且要知道使用打字稿代码here

写出更好的angularjs

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

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

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

1 个答案: