Question

我正在尝试在表单中观察并验证（一起）两个输入。

我遇到的问题是，我似乎只能看到其中一个字段的价值。

我的HTML看起来像这样：

<form name="form">
    <label for="account-number">Account Number</label>
    <input type="text" name="account-number" id="account-number" ng-model="bank.accountNumber" modcheck><br>
    <label for="sort-code">Sort Code</label>
    <input type="text" name="sort-code" id="sort-code" ng-model="bank.sortCode" modcheck>
</form>

指令看起来像这样：

angular.module('app', []).directive('myDirective', function() {
    'use strict';
    // Runs during compile
    return {
        // name: '',
        // priority: 1,
        // terminal: true,
        // scope: {}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $element, $attrs, $transclude) {},
        require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '',
        // templateUrl: '',
        // replace: true,
        // transclude: true,
        // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
        link: function($scope, elem, attrs, ngModel) {
            var _accountNumber, _sortCode;
            // from: http://stackoverflow.com/a/28332055/633056
            $scope.$watch(attrs.ngModel, function(val) {
                console.log(attrs.ngModel, attrs.name, val);
            });
            ngModel.$viewChangeListeners.push(function() {

                if (ngModel.$name == 'account-number') {
                    _accountNumber = ngModel.$viewValue;
                }
                if (ngModel.$name == 'sort-code') {
                    _sortCode = ngModel.$viewValue
                }
                console.log((_accountNumber && _accountNumber.length == 8), (_sortCode && (_sortCode.length >= 6 || _sortCode.length <= 8)));
            });
        }
    };
});

我在这里准备了一个CodePen（您需要打开开发工具控制台才能看到发生了什么）：https://codepen.io/atwright147/pen/LpgyWR/

如何编写一个可以同时查看多个输入的viewValue的指令？

Answer 1

在指令中，ngModel仅包含该指令所在元素的模型值。要获取控制器范围模型的值，您需要使用scope: { bank: '='}将范围包含在指令中（绑定可能会有所不同，具体取决于您要对指令中的范围执行的操作）。

angular.module('app', []).directive('modcheck', function() {
    'use strict';
    // Runs during compile
    return {
        scope: { bank: '='}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $element, $attrs, $transclude) {},
        require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
        link: function(scope, elem, attrs, ngModel) {
            var _accountNumber, _sortCode;
            // from: http://stackoverflow.com/a/28332055/633056
            scope.$watch('bank', function(val) {
                console.log('$watch:', scope.bank, attrs.name, val);
            },true);
            ngModel.$viewChangeListeners.push(function() {
                if (ngModel.$name == 'account-number') {
                    _accountNumber = ngModel.$viewValue;
                }
                if (ngModel.$name == 'sort-code') {
                    _sortCode = ngModel.$viewValue
                }

                console.log(('Overall:', _accountNumber && _accountNumber.length == 8), (_sortCode && (_sortCode.length >= 6 || _sortCode.length <= 8)));
            });
        }
    };
});

和html

<form name="form">
    <label for="account-number">Account Number</label>
    <input type="text" name="account-number" id="account-number" ng-model="bank.accountNumber" modcheck bank="bank"><br>
    <label for="sort-code">Sort Code</label>
    <input type="text" name="sort-code" id="sort-code" ng-model="bank.sortCode" modcheck bank="bank">
</form>

AngularJS，在指令

1 个答案: