指令的隔離範圍對象未定義

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>