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

Question

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

的.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>