时间戳

首页 > 解决方案 > 在angularJs的自定义指令中观察错误抛出错误

javascript - 在angularJs的自定义指令中观察错误抛出错误

问题描述

我正在将我的项目从 AngularJS 1.4.4 升级到最新的 1.8.2。
一切正常，直到我升级到 1.6.0。
在 1.6.0 中，我收到以下错误：

Error: [ng:cpws] http://errors.angularjs.org/1.6.0/ng/cpws
H/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:6:425
c@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:12:200
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:12:7
c@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:12:306
d@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:11:397
c@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js:12:306

升级到1.6.10没有报错

但是，当我升级到1.7.0或1.8.0 时，我收到以下错误：

Error: [ng:cpws] http://errors.angularjs.org/1.8.0/ng/cpws
    Angular 43
angular.js:15635:15
Error: [$rootScope:infdig] http://errors.angularjs.org/1.8.0/$rootScope/infdig?p0=10&p1=%5B%5D
    Angular 35
angular.js:15635:15
Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.8.0/$rootScope/infdig?p0=10&p1=%5B%5D
    Angular 35

我不明白为什么会这样。
这是我的代码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<body>
<div ng-app="app">    
    <div class="parent" ng-controller="MainCtrl" >
        <form novalidate name="updateNumberForm"  my-directive >
                <label for="number">Please input (5 char max).</label>
                <input id="number" type="text" ng-model="vm.number" name="number" ng-maxlength="5">
                <button type="button" ng-disabled="updateNumberForm.$invalid">Next </button>                
            </form>
    </div>
</div>
<script>
var app = angular.module("app", []);
app.controller("MainCtrl", function( $scope ){ });
app.directive("myDirective", function(){    
    return {
        restrict: 'A',
        link: function (scope, elm, attrs) {
            scope.$watch('updateNumberForm.$error', function (errors, prevErrors) {
                angular.forEach(errors, function (detailsArray, errorType) {
                    angular.forEach(detailsArray, function (error) {
                        if (error.$dirty && error.$invalid) {
                            console.log('Error field: ' + error.$name);
                        }
                    });
                });
            }, true);
        }
    }
});
</script> 
</body>
</html>

如果我添加scope : {},到指令中没有错误，但不会调用错误函数。

标签： javascriptangularjsangularjs-directiveangularjs-scope

解决方案

推荐阅读