Angular $scope.$watch returns 当值包含 coma(",") 或 arobase("@") 时未定义

Angular $scope.$watch returns undefined when the value contains coma(",") or arobase("@")

当观察到的值包含逗号 (,) 或 arobase (@) 时,scope.$watch returns 未定义。 你能解释一下为什么吗?

我尝试制作一个片段,但出于某种原因,我什至无法使示波器正常工作。$watch 工作 - 但它在我的本地项目中工作...

'use strict';
angular.module('demoApp', [])
  .controller('mainController',
        ['$scope',
            function ($scope) {
              
                $scope.mailToAdd = {email: ""};
                
                $scope.$watch('mailToAdd.email', function(val){
                    console.log(val);
                   $scope.watched= val;

                });
 }]
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
   <br/>
  Value to observe: <input ng-model="mailToAdd.email" type="email" />
  <br/>
  <br/>
  Value watched: <input ng-model="watched" type="text" />
</div>

scope.$watch无关。这是因为您的模型本身变为空,因为您的输入类型为 email 并且逗号是电子邮件的无效字符,因为数据无效它将变为空白(您可以通过打印 ng- 的值来测试它视图上的模型 {{mailToAdd.email}})。您可能需要将其转换为文本框。或者您可能必须将 ng-model-options allowInvalid 标志设置为 true。但是如果你想验证电子邮件,你可以 have to perform custom validation.

 ng-model-options="{'allowInvalid':true}

'use strict';
angular.module('demoApp', [])
  .controller('mainController',
        ['$scope',
            function ($scope) {
              
                $scope.mailToAdd = {email: ""};
                
                $scope.$watch('mailToAdd.email', function(val){
                    console.log(val);
                   $scope.watched= val;

                });
 }]
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
   <br/>
  Value to observe: <input ng-model="mailToAdd.email" ng-model-options="{'allowInvalid':true}" type="email" />
  {{mailToAdd.email}}
  <br/>
  <br/>
  Value watched: <input ng-model="watched" type="text" />
</div>