使用typescript angularjs指令的控制器和其他繼承控制器在指令的鏈接功能，

Question

我正在爲typescript編寫followin 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); 
}