指令的隔离范围对象是不确定的 [英] Directive's isolated scope object is undefined

问题描述

我是新来AngularJS，并试图了解如何将指令的隔离范围绑定视图的NG-模式。当任一输入为空或两个装满一些值的形式应该是有效的。帮我找出为什么我在控制台日志得到未定义：

html的：

 ＆LT;表格名称=recipientsFormNOVALIDATE＆GT;
    ＆LT; MD-输入容器＆GT;
        ＆LT;标签＆gt;名称和LT; /标签＆gt;
        ＆LT;输入名称=名称类型=文本NG模型=relationship.nameVALUE =空 - 或 - 既充满=relationship.relationshipType＆GT;
        ＆LT; D​​IV NG的消息=。recipientsForm.name $错误＆GT;
            ＆LT; D​​IV NG消息=emptyOrBothFilled方式＆gt;输入姓名和LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / MD-输入容器＆GT;
    ＆LT; MD-输入容器＆GT;
        ＆LT; MD-选择name =类型的占位符=选择你的关系......吴模型=relationship.relationshipType空 - 或 - 既充满=relationship.name＆GT;
            ＆LT; MD-NG选项重复=型关系类型VALUE ={{type.relationshipType}}＆GT;
                {{type.name}}
            ＆LT; / MD选项＆GT;
        ＆LT; / MD-选择＆GT;
        ＆LT; D​​IV NG的消息=。recipientsForm.type $错误＆GT;
            ＆LT; D​​IV NG消息=emptyOrBothFilled方式＆gt;选择关系＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / MD-输入容器＆GT;
＆LT; /表及GT;
 

下面是.js文件：

 （函数（）{
    使用严格的;    角
        .module（应用）
        .directive（'emptyOrBothFilled'，[emptyOrBothFilled]）;    功能emptyOrBothFilled（）{
        返回{
            限制：'A'，
            要求：'ngModel'，
            范围： {
                targetNgModel：'= emptyOrBothFilled
            }，
            链接：功能（$范围，元素，ATTRS，ngModel）{
                ngModel。$ validators.emptyOrBothFilled =功能（VAL）{
                    的console.log（$ scope.targetNgModel）;
                    返回（VAL＆安培;！＆安培;！$ scope.targetNgModel）|| （!! VAL和放大器;＆安培;！$ scope.targetNgModel）;
                }                $范围。$腕表（'targetNgModel'，函数（）{
                    ngModel $的validate（）。
                }）
            }
        }
    }
}）（）;
 

为什么的console.log（$ scope.targetNgModel）;输出未定义？谢谢你。

解决方案

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

然而，如果你preFER使用自定义的指令，我已经提供了一个可以尝试的实现。您不能使用$ scope.targetNgModel为你做到了，但你可以使用： $范围的eval（targetNgModel）。请注意，您可以使用 $ 的isEmpty检查未定义或空值。

\r

\r

VAR应用= angular.module（'required.demo'，[]）;\r
app.controller（'MyCtrl'，函数（$范围）{\r
\r
}）;\r
app.directive（'emptyOrBothFilled'，[\r
  功能（）{\r
    返回{\r
      限制：'A'，\r
      适用范围：真，\r
      要求：'ngModel'，\r
      链接：功能（范围，ELEM，ATTRS，CTRL）{\r
        VAR检查=功能（）{\r
          //获得第一个输入的值\r
          VAR E1 = $范围的eval（attrs.emptyOrBothFilled）。\r
          //获取第二个输入的值\r
          。VAR E2 = $范围的eval（attrs.ngModel）;\r
          \r
          如果（按Ctrl。$的isEmpty（E1）|| CTRL。$的isEmpty（E2））{\r
            返回CTRL $的isEmpty（E1）及＆放大器; CTRL $的isEmpty（E2）。\r
          }\r
          \r
          \r
        };\r
        范围。$腕表（检查，功能（的newval，OLDVAL）{\r
          //表单控件设置为有效的检查函数的值\r
          如果（的newval！== OLDVAL）{\r
            CTRL $ setValidity（emptyorboth的newval）。\r
          }\r
        }）;\r
      }\r
    };\r
  }\r
]）;

\r

＆LT;脚本SRC =HTTPS：//$c$c.angularjs。组织/ 1.3.15 / angular.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; D​​IV NG-应用=required.demo＆GT;\r
  ＆所述; H3＆gt;使用ngRequired＆下; / H3＆GT;\r
  ＆LT;表格名称=MyForm的NOVALIDATE＆GT;\r
    ＆LT;输入类型=文本名称=名字吴模型=名NG-所需=全名/＆GT;\r
    ＆LT;输入类型=文本名称=全名NG模型=全名NG-所需=名/＆GT;\r
    ＆LT; p NG秀=。myform.name $ error.required || myform.fullname $ error.required。＆gt;您必须填写在这两个领域＆LT; / P＆GT;\r
  ＆LT; /表及GT;\r
  ＆LT;小时＆GT;\r
  ＆LT; D​​IV NG控制器=MyCtrl＆GT;\r
    ＆LT; H3＆gt;使用自定义指令＆LT; / H3 GT＆;\r
    ＆LT;表格名称=myform2NO​​VALIDATE＆GT;\r
      ＆LT;输入类型=文本名称=名字吴模型=relationship.name/＆GT;\r
      ＆LT;输入类型=文本名称=关系NG-模式=relationship.relationshipType空 - 或 - 既充满=relationship.name/＆GT;\r
      ＆LT; p NG秀=$ myform2.relationship error.emptyorboth。＆gt;您必须填写在这两个领域＆LT; / P＆GT;\r
    ＆LT; /表及GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I'm new to AngularJS and trying to understand how to bind a directive's isolated scope with view's ng-model. The form should be valid when either inputs are empty or both filled with some values. Help me to find out why do I get "undefined" in a console log:

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

Here is the .js file:

(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();
                })
            }
        }
    }
})();

Why console.log($scope.targetNgModel); output is "undefined"? Thanks.

解决方案

Rather than building your own directive, I recommend using the built in ng-required on the input. Try it below. The message will appear if either field is not empty and will disappear if both are either empty or have a value.

However, if you prefer to use a custom directive, I've included an implementation that you can try. You can't use $scope.targetNgModel as you've done it, but you can use: scope.$eval(targetNgModel). Note that you can use $isEmpty to check for undefined or empty values.

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>

这篇关于指令的隔离范围对象是不确定的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！