AngularJS，观看指令中的多个字段

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>