以下のような Directive を作成して、バインドされる段階で Filter を適用すると良いと思います。
これであれば対象が増えても負担にならないでしょう。
app.directive("timeModel", function(dateFilter){
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel){
ngModel.$parsers.push(function(value){
return dateFilter(value, 'HH:mm:ss');
})
}
}
})
こうしておけば、html側で
<input type="time" ng-model="tm" time-model />
<input type="time" ng-model="tm2" time-model />
<input type="time" ng-model="tm3" time-model />
とするだけで、すべてのモデルがHH:mm:ss
の文字列になってバインドされます。
(モデルが増えるたびに都度 Filterするコードを書く必要がなくなる。一方で文字型になってしまうのでDate型として頻繁に扱うにはそちら側で変換が必要になる。これについては後で解決方法を提示します。)
以下のブロックがサンプルです。
var app = angular.module("app",[]);
app.directive("timeModel", function(dateFilter){
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModel){
ngModel.$parsers.push(function(value){
return dateFilter(value, 'HH:mm:ss');
})
}
}
})
app.controller("AppCtrl", function($scope){
// コントローラのコードはデモのために書いたのみ。
// HH:mm形式の文字を取得するためには不要。
// 質問では、コントローラ側で取り出した値が `HH:mm:ss` でないことが課題となって
// いたので、コントローラ側のコードを用意した。
// ※ コントローラ自体はng-controllerで指定してるから必要
$scope.anotherModel = "";
$scope.typeOf = function(value){
return (typeof value);
}
$scope.copyToAnotherModel = function(){
$scope.anotherModel = $scope.tm;
}
})
<div ng-app="app" ng-controller="AppCtrl as app">
<div>
<input type="time" ng-model="tm" time-model />
</div>
<div> tm = value : '{{tm}}', type: '{{ typeOf(tm) }}' </div>
<button ng-click="copyToAnotherModel()">Use tm in Controller</button>
<input type="text" ng-model="anotherModel"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
サンプルとしてシンプルな形にしてありますが、応用してモデル自体を工夫すれば Dateも持ちつつ文字列表現も返せるようなオブジェクトをバインドすることもできるでしょう。
例えばディレクティブのlink内、ngModel.$parsers.push
のreturn文を以下の様に書き換えます。
return {
value: value ,
toString : function(){ return dateFilter(value, 'HH:mm:ss')}
};
その他違う書式にも対応したいなら、書式を属性で指定できるようにして Directive の方で対応すれば書式が増えるたびに Directiveが増えるという問題もおきないと思います。