0
私は、ディレクティブを使用して数字の倍数だけを表示する制限を作成しています。 数値は2つの入力値、チームのチームの数とのグループの数に基づいて計算されます。 （チーム/グループ）-1。入力値を更新した後の角型js update指示文
制限事項に基づいてラウンドに無効な値を入力すると、赤色で表示されました。
当初は正常に動作していますが、チームとグループの値がフォームで更新さとき、ディレクティブは更新されません。
私はいくつかの答えで見たように$ watchを使用しようとしましたが、うまくいかなかったか、私の場合に正しく実装する方法がわかりませんでした。
注：{{}}の代わりに{{}}を定義して、テンプレートエンジンボルトとの衝突を回避しました。これは定義して正常に動作するため、問題はありません。
任意の助けをいただければ幸い、以下の私のコード：
HTML：
<div ng-app="angApp">
<div ng-controller="DrawController">
<form action="" name="drawForm" role="form" method="post" >
<input id="teams" name="teams" ng-model="competition.teams" required="" ng-change="getTeams()" type="number">
<select id="groups" name="groups" ng-options="n for n in groups track by n" ng-model="competition.groups" required="">
<option selected="selected" value="" class="">Seleccione el número de grupos</option>
</select>
<input id="rounds" name="rounds" ng-model="competition.rounds" data-multiple-validator="[[competition.teams]]" data-groups="[[competition.groups]]" type="number">
</form>
</div>
</div>
JS：あなたは、コントローラの範囲をマッピングするためのディレクティブのスコープオプションを使用する必要が
var app = angular.module('angApp', []);
app.config(
function($interpolateProvider)
{
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}
)
app.controller(
'DrawController',
function($scope)
{
var competition = {
teams : 8,
groups : 1,
finalists : {'value': 0, 'label': '0'},
rounds : 7,
type : 'league',
test : 3
}
$scope.competition = competition;
$scope.getTeams = function() {
$scope.groups = [];
var maxGroups = Math.floor(($scope.competition.teams)/2);
$scope.competition.teams % 2 === 0 ? (i = 2, j = 1) : (i = 3, j = 2);
$scope.groups[0] = 1;
k = 1;
for (i; i <= maxGroups; i += j) {
if($scope.competition.teams % i === 0){
$scope.groups[k] = i;
k++;
}
}
};
$scope.getTeams();
}
);
app.directive('multipleValidator', [function(){
return {
restrict: 'AC',
require: 'ngModel',
link: function(scope, elem, attr, ngModelCtrl) {
if (!ngModelCtrl) {
return;
}
var multiple = parseInt(attr.multipleValidator)/parseInt(attr.groups)-1;
if (!multiple) {
return;
}
ngModelCtrl.$validators.multipleValidator = function(modelValue, viewValue) {
return !!modelValue && modelValue%multiple === 0;
}
}
}
}])