指令的分离的范围目的是未定义(Directive's isolated scope obje

我是新来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）; 输出“未定义”？谢谢。

而不是建立自己的指令，我建议使用内置的NG-需要输入。试试下面。如果任一字段不为空，并且将消失如果两者都为空或有一个值将出现消息。

但是，如果你喜欢使用自定义指令，我已经提供了一个可以尝试的实现。您不能使用$ 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>