当值包含 coma(",") 或 arobase("@") 时，Angular $scope.$watch 返回 undefined答案

【问题标题】：Angular $scope.$watch returns undefined when the value contains coma(",") or arobase("@")当值包含 coma(",") 或 arobase("@") 时，Angular $scope.$watch 返回 undefined
【发布时间】：2016-01-29 21:21:00
【问题描述】：

当观察到的值包含逗号 (,) 或 arobase (@) 时，scope.$watch 返回 undefined。你能解释一下为什么吗？

我尝试制作一个 sn-p，但由于某种原因，我什至无法使 scope.$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>

【问题讨论】：

标签： angularjs scope watch

【解决方案1】：

与scope.$watch 无关。这是因为您的模型本身变为空，因为您的输入类型为 email 并且逗号是电子邮件的无效字符，因为数据无效它将变为空白（您可以通过打印 ng-model 的值来测试视图{{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>

【讨论】：