使用typescript angularjs指令的控制器和其他继承控制器在指令的链接功能,
问题描述:
我正在为typescript编写followin angularjs指令以进行表单验证。我想弄清楚,如何在指令的链接函数中使用指令的控制器和表单继承控制器。使用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);
}
答
让我们开始:我认为,这个问题必须用[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);
}