[英]How to create a custom angular directive which contains multiple input controls?
我正在做我的第一個有角度的項目。 無論好壞,我都在嘗試將幾乎所有可重復的HTML轉換為指令。 我要求用戶選擇HH:MM格式的時間。 因此,我需要顯示兩個SELECT元素。 由於我需要在很多地方提供此控件,因此我試圖將其轉換為指令。
<div class="filterLabel">{{fieldLabel}}</div>
<select class="FilterDDL" ng-style="{width: selectHhWidthPx + 'px'}">
<option value="none">HH</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
<span>:</span>
<select class="FilterDDL" ng-style="{width: selectHhWidthPx + 'px'}">
<option value="none">MM</option>
<option value="0">00</option>
<option value="30">30</option>
</select>
我從該指令獲得的最終結果是獲得以分鍾為單位的時間值[(HH * 60 + MM)],以進行進一步的計算。 但是我想不出一種方法來獲取與指令關聯的ngModel,該指令從兩個下拉菜單的組合中返回以分鍾為單位的時間。 我讀到有關Link函數的信息,但無法弄清楚是否可以在我的方案中使用它。 讓自定義指令跨越多個輸入元素甚至是一種好習慣?
請參考以下代碼:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="angular.min.js"></script>
<script type="text/javascript">
angular.module('demoApp', [])
.controller('Controller', ['$scope', function ($scope) {
$scope.totalMinutes = function () {
return $scope.mintutes + ($scope.hours * 60);
}
$scope.mintutes = 1;
$scope.hours = 1;
}])
.directive('timeSelection', function () {
return {
restrict: 'E',
template: "Hours:<input type='number' ng-model='hours' /> Minutes:<input type='number' ng-model='minutes' />",
scope: {
hours: "=hours",
minutes:"=mintutes"
}
};
});
</script>
</head>
<body>
<div ng-app="demoApp">
<div ng-controller="Controller">
<time-selection hours="hours" mintutes="mintutes" ></time-selection>
Total Minutes : {{totalMinutes()}}
</div>
</div>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.