Question

我正在学习AngularJS并尝试开发一个简单的应用程序。该应用程序包含2页（部分），列表和详细信息。

如果我单独访问这两个页面（手动输入地址栏中的URL），则两个页面都会正常加载而不会出现任何错误。但是，如果我从列表页面导航到详细信息页面，则控制台会显示此错误。

TypeError: Cannot read property '$$phase' of null
at Object.$$debounceViewValueCommit (angular.min.js:293)
at Object.$setViewValue (angular.min.js:293)
at Array.<anonymous> (angular.min.js:315)
at m.$digest (angular.min.js:145)
at m.$apply (angular.min.js:147)
at l (angular.min.js:101)
at XMLHttpRequest.N.onload (angular.min.js:106)

然而，页面仍然正常加载，但错误困扰我。究竟发生了什么？

app.js

var myApp = angular.module('myApp', ['ngRoute', 'heroControllers']);

myApp.config(['$routeProvider', function ($routeProvider) {
    "use strict";
    $routeProvider.
    when('/list', {
        templateUrl: 'partials/list.html',
        controller: 'ListController'
    }).
    when('/details/:itemId', {
        templateUrl: 'partials/details.html',
        controller: 'DetailsController'
    }).
    otherwise({
        redirectTo: '/list'
    });
}]);

//controller
var heroControllers = angular.module('heroControllers', []);

heroControllers.controller('ListController', ['$scope', '$http', function ($scope, $http) {
    "use strict";
    $http.get('js/data.json').then(function (response) {
        $scope.hero = response.data;
        $scope.order = "nickname";
    });
}]);

heroControllers.controller('DetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    "use strict";
    $http.get('js/data.json').then(function (response) {
        $scope.hero = response.data;
        $scope.whichItem = $routeParams.itemId;
    });
}]);

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>Angular Demo</title>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular/angular-route.min.js"></script>

    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="page-header">
                    <h1><a href="#!/list">Heroes</a></h1>
                </div>
                <div ng-view></div>
            </div>
        </div>
    </div>
</body>

</html>

list.html

<section>
        <div class="form-group">
            <input ng-model="query" type="text" class="form-control" placeholder="Search for heroes" autofocus>
        </div>
        <div class="form-group">
            <label>Sort by: </label>
            <select ng-model="order">
                <option value="nickname">Nickname</option>
                <option value="name">Name</option>
            </select>

            <input ng-model="direction" type="radio" name="direction" checked>
            <label>Ascending</label>
            <input ng-model="direction" type="radio" name="direction" value="reverse">
            <label>Descending</label>
        </div>
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="item in hero | filter: query | orderBy: order:direction">
                <a href="#!/details/{{hero.indexOf(item)}}">
                    <img ng-src="images/{{item.imagename}}.png" alt="Photo of {{item.nickname}}">
                    <div>
                        <h2>{{item.nickname | uppercase}}</h2>
                        <h3>{{item.name}}</h3>
                    </div>
                </a>
            </li>
        </ul>
</section>

details.html

    <section>
        <div ng-model="hero" class="jumbotron">
            <h2>{{hero[whichItem].nickname}}</h2>
            <div>
                <h3>{{hero[whichItem].name}}</h3>
                <img ng-src="images/{{hero[whichItem].imagename}}.png" alt="Photo of {{hero[whichItem].imagename}}">
                <div>{{hero[whichItem].lore}}</div>
            </div>
        </div>
        <a href="#!/list">&laquo; Back to search</a>
    </section>

data.json

[
    {
        "nickname" : "Sniper",
        "imagename" : "sniper",
        "name" : "Kardel Sharpeye",
        "lore" : "Bla... Bla... Bla..."
    },
    {
        "nickname" : "Io",
        "imagename" : "io",
        "name" : "Wisp",
        "lore" : "Bla... Bla... Bla..."
    },
    {
        "nickname" : "Timbersaw",
        "imagename" : "timbersaw",
        "name" : "Rizzrack",
        "lore" : "Bla... Bla... Bla..."
    }
]

Answer 1

使用稳定版本的angularjs（最新版本为1.5.9）来摆脱

＆＃34; TypeError：无法读取属性＆＃39; $$阶段＆＃39; null - AngularJS＆＃34; 错误。

TypeError：无法读取属性＆＃39; $$阶段＆＃39; of null - AngularJS

1 个答案: