文章/答案/技术大牛

发布

社区首页 >问答首页 >TypeError:无法读取null - AngularJS的属性“$$phase”

问TypeError:无法读取null - AngularJS的属性“$$phase”
EN

Stack Overflow用户

提问于 2016-12-08 05:30:33

回答 1查看 3.6K关注 0票数 1

我正在学习AngularJS，并试图开发一个简单的应用程序。该应用程序包括2页(部分)，这是列表和细节。

如果我单独访问这两个页面(手动在地址栏中输入URL )，那么两个页面都会加载得很好，不会出现任何错误。但是，如果我从列表页面导航到details页面，控制台将显示此错误。

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..."
    }
]

angularjs

回答 1

Stack Overflow用户

发布于 2016-12-08 05:42:06

使用稳定版本的angularjs(目前最新版本为1.5.9)来消除

"TypeError:无法读取null -AngularJS的属性'$$phase‘“错误。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41032391

复制

相似问题

问TypeError:无法读取null - AngularJS的属性“$$phase”
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeError:无法读取null - AngularJS的属性“$$phase”EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeError:无法读取null - AngularJS的属性“$$phase”
EN