1

フォーム フィールドのバリデータを作成したいと考えています。

私の場合、非表示の編集フォームとユーザー名を表示するリストを含むページがあります。リスト内のユーザー名の 1 つをクリックすると、check-unique ディレクティブを含む編集フィールドが下に表示されます。

編集フォームを開くとすぐに、パラメーター値をディレクティブに解析したいと考えています。ただし、ページは既にコンパイルされており、値はページのロード中にのみディレクティブに解析されるため、ディレクティブではもちろん更新されません。したがって、ユーザー名を属性値として解析したいのに、 attr.checkUnique 値が空です。

これが私のフィドルです。 http://jsfiddle.net/charms/r3ajt/28/

「openEdit」メソッドの実行中に新しいパラメータを引き継ぐためにディレクティブを何らかの形で更新できるかどうか誰かが知っていますか?

または、この問題を克服するための他の賢い方法はありますか? どういうわけか私はここで立ち往生しています。

HTML

<div ng-app="myApp" ng-controller="HandleCtrl">
<div ng-repeat="u in users">
    {{u.username}}<button ng-click="openEdit({{u.id}})">Edit</button><br/>
</div>
<form ng-show="showNew" novalidate>
    <input type="text" name="username"/>
</form>
<form ng-show="showEdit" novalidate>
    <input type="text" name="username" ng-model="user.username" check-unique="{{user.username}}"/>
</form>
</div>

AngularJS

angular.module('myApp', [])
.controller('HandleCtrl', ['$scope',function($scope) {
$scope.showNew = false;
$scope.showEdit = false;

$scope.user = {};
$scope.users = [];

$scope.users[0] = {username:'matt', id:1};
$scope.users[1] = {username:'bob', id:2};
$scope.users[2] = {username:'tom', id:3};

$scope.openEdit = function(id) {
    $scope.showEdit = true;
    $scope.user = $scope.users[id-1];
};
}])
.directive('checkUnique', [function() {
return {
    require: 'ngModel',
    restrict: 'A',
    scope: false,
    link: function(scope, elem, attr, ctrl) {
        console.log("I want username but value is empty: " + attr.checkUnique);
    }
};
}]);
4

2 に答える 2

0

ctrollerオプションを使用してモデルにアクセスでき、モデルが更新されたときに何をしますか。これは、実行できることとモデルにアクセスする方法の完全な例です。

.directive('checkUnique', [function() {
    return {
        require: 'ngModel',
        restrict: 'A',
        scope: false,
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngModel, function(nv) { // Don't watch ctrl.$viewValue cause it won't watch.
                console.log("I want username but value is empty: " + nv); // When 
                if (nv.indexOf('is magic') === -1) { // Don't want infinite loop.
                    ctrl.$setViewValue(nv +  ' is magic'); // Set a new value to model.
                }

                console.log('My current value is ' + ctrl.$viewValue); // Accessing model scope.
            });
        }
    };
}]);

jsFiddleが更新されました。

于 2013-09-05T21:51:07.367 に答える