指令的隔离范围对象未定义

Question

我是 AngularJS 的新手，并试图了解如何将指令的隔离范围与视图的 ng-model 绑定。当任一输入为空或都填充了某些值时，表单应该是有效的。帮助我找出为什么我在控制台日志中得到“未定义”：

.html:

<form name="recipientsForm" novalidate>
    <md-input-container>
        <label>Name</label>
        <input name="name" type="text" ng-model="relationship.name" value="" empty-or-both-filled="relationship.relationshipType">
        <div ng-messages="recipientsForm.name.$error">
            <div ng-message="emptyOrBothFilled">Enter name.</div>
        </div>
    </md-input-container>
    <md-input-container>
        <md-select name="type" placeholder="Select your relation... " ng-model="relationship.relationshipType" empty-or-both-filled="relationship.name">
            <md-option ng-repeat="type in relationshipTypes" value="{{type.relationshipType}}">
                {{type.name}}
            </md-option>
        </md-select>
        <div ng-messages="recipientsForm.type.$error">
            <div ng-message="emptyOrBothFilled">Pick relationship.</div>
        </div>
    </md-input-container>
</form>

这是 .js 文件：

(function () {
    'use strict';

    angular
        .module('app')
        .directive('emptyOrBothFilled', [emptyOrBothFilled]);

    function emptyOrBothFilled() {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                targetNgModel: '=emptyOrBothFilled'
            },
            link: function($scope, element, attrs, ngModel) {
                ngModel.$validators.emptyOrBothFilled = function(val) {
                    console.log($scope.targetNgModel);
                    return (!val && !$scope.targetNgModel) || (!!val && !!$scope.targetNgModel);
                }

                $scope.$watch('targetNgModel', function() {
                    ngModel.$validate();
                })
            }
        }
    }
})();

为什么 console.log($scope.targetNgModel);输出是“未定义”？谢谢。

Answer 1

我建议在输入中使用内置的 ng-required，而不是构建自己的指令。在下面试试。如果任一字段不为空，则该消息将出现，如果两个字段为空或有值，该消息将消失。

但是，如果您更喜欢使用自定义指令，我提供了一个您可以尝试的实现。您不能像以前那样使用 $scope.targetNgModel，但可以使用：scope.$eval(targetNgModel)。请注意，您可以使用$isEmpty 检查未定义或空值。

var app = angular.module('required.demo', []);
app.controller('MyCtrl', function($scope) {

});
app.directive('emptyOrBothFilled', [
  function() {
    return {
      restrict: 'A',
      scope: true,
      require: 'ngModel',
      link: function(scope, elem, attrs, ctrl) {
        var checker = function() {
          //get the value of the first input
          var e1 = scope.$eval(attrs.emptyOrBothFilled);
          //get the value of the second input  
          var e2 = scope.$eval(attrs.ngModel);
          
          if (ctrl.$isEmpty(e1) || ctrl.$isEmpty(e2)) {
            return ctrl.$isEmpty(e1) && ctrl.$isEmpty(e2);
          }
          
          
        };
        scope.$watch(checker, function(newval, oldval) {
          //set the form control to validity with the value of the checker function
          if (newval !== oldval) {
            ctrl.$setValidity("emptyorboth", newval);
          }
        });
      }
    };
  }
]);

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-app="required.demo">
  <h3>Using ngRequired</h3> 
  <form name="myform" novalidate>
    <input type="text" name="name" ng-model="name" ng-required="fullname" />
    <input type="text" name="fullname" ng-model="fullname" ng-required="name" />
    <p ng-show="myform.name.$error.required || myform.fullname.$error.required">You must fill in both fields</p>
  </form>
  <hr>
  <div ng-controller="MyCtrl">
    <h3>Using Custom Directive</h3> 
    <form name="myform2" novalidate>
      <input type="text" name="name" ng-model="relationship.name" />
      <input type="text" name="relationship" ng-model="relationship.relationshipType" empty-or-both-filled="relationship.name" />
      <p ng-show="myform2.relationship.$error.emptyorboth">You must fill in both fields</p>
    </form>
  </div>
</div>