Question

我想为表单字段编写验证器。

在我的情况下，我有一个页面，其中包含隐藏的编辑表单和显示用户名的列表。单击列表中的某个用户名时，会在下面显示一个包含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);
    }
};
}]);

Answer 1

如果我理解你想要正确实现的目标......

您需要watch来更改指令中的模型。试试这个：

.directive('checkUnique', [function() {
return {
    require: 'ngModel',
    restrict: 'A',
    scope: false,
    link: function(scope, elem, attr, ctrl) {
        scope.$watch('user.username', function(newValue, oldValue) {
            if (newValue) {
                console.log('Username selected is ' + newValue);
            }
        });
    }
};

由于您的指令正在共享它的父作用域（在指令定义中指定），因此您可以直接访问'user.username'。

Answer 2

您可以使用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已更新。

刷新指令中的值

2 个答案: