対応バージョン
- Angular 1.4.8
- TypeScript 1.7.5
で動作確認。
バリデーション系directive
module foo {
angular.module('bar').directive('hoge', () => {
return {
restrict: 'A',
scope: {},
require: ['ngModel'],
priority: -1,
controller: HogeCtrl
};
});
class HogeCtrl {
/* @ngInject */
constructor($element: ng.IAugmentedJQuery) {
var ngModel: ng.INgModelController = $element.controller('ngModel');
ngModel.$validators['hoge'] = (modelValue, viewValue) => {
var v = modelValue || viewValue;
return true;
};
}
}
}
独自input系directive
module foo {
angular.module('bar').directive('hoge', () => {
return {
restrict: 'E',
scope: {},
require: ['ngModel'],
priority: -1,
controller: HogeCtrl,
controllerAs: 'ctrl',
replace: true,
template: `<div>hoge</div>`
};
});
interface IHogeData {}
class HogeCtrl {
ngModel: ng.INgModelController;
/* @ngInject */
constructor($element: ng.IAugmentedJQuery) {
this.ngModel = $element.controller('ngModel');
}
get data(): IHogeData {
return this.ngModel.$viewValue;
}
set data(hogeData: IHogeData) {
this.ngModel.$setViewValue(hogeData);
}
}
}
補足
-
/* @ngInject */は olov/ng-annotateで自動的にinjectの例のヤツを付けるためのもの。 -
priority: -1は過去のngModelのpriorityが0だったことがあったので一応。基本は付けなくても問題ないかも。 - scaffold用のテンプレを作ると捗ります。
補足2
@shuhei さん曰く、/* @ngInject */より、今は"ngInject";と書いたほうが良いそうです。
class A {
constructor($scope: ng.IScope) {
"ngInject";
}
}