Question

我已经在angular.js中创建了一个示例应用程序在这一刻，它的工作很好，但在控制台中我得到一个不清楚的错误：

TypeError: Cannot set property 'menu' of null
at http://localhost/crm/js/controllers/controllers.js:42:29
at F (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:100:187)
at F (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:100:187)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:101:350
at k.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:68)
at k.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:109:168)
at k.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:112:398)
at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:72:454)
at u (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:77:463)
at XMLHttpRequest.z.onreadystatechange    (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js:79:24)

我调试了我的应用程序，我知道它在哪里出了问题，但无法解决它＆＃39;菜单＆＃39;在我的范围内是可变的：

//editCTRL
app.controller("EditCTRL", function($scope, $routeParams, $http){
var _this = this;

$http.get('api/menu.php?v=edit').then(function(data) {        
    $scope.$parent.menu = data.data;

},function(error){});
});

第二个ctrl

//allCTRL
app.controller("AllCTRL", function($scope, $routeParams, $http){
var _this = this;

$http.get('api/menu.php?v=all').then(function(data) {        
    $scope.$parent.menu = data.data;

},function(error){});
});

现在，当我单击菜单中的某个链接时（菜单项是动态从api获取，如ctrl中显示），ng-route用ctrl更改视图（例如allCTRL to editCTRL）一切正常，但是当我们模拟下载一些大数据（在api中的echo之前添加sleep（1））并且我们在链接上点击两次（或更多）（在firebug中的2+ pendings请求）之后（在从api获取数据之后）抛出这个错误，但是最后一次请求填写模型正确。

应用程序工作正常，但这个错误让我很害怕，我也不知道如何修复它。有任何想法吗？

MainCTRL

//mainCTRL
app.controller("MainCTRL", function($scope, flowHandler){
var _this = this;
$scope.pageTitle = "MainCTRL";
$scope.menu = [];   

});

并查看：

<html ng-app="CRM" ng-controller="MainCTRL">
<head lang="pl">
<meta charset="UTF-8">
<title>{{ pageTitle }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 main-menu" ng-include src="'js/views/menu.html'">
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 fade-container" >
        <div class="fade" ng-view></div>
    </div>
    </div>
</body>
</html>

Answer 1

错误听起来像$ scope和/或$ parent是null。当您尝试设置null变量的属性时，会出现此类错误。我会检查$ scope和$ parent的值，这会导致错误的原因。

Answer 2

永远不要依赖$ scope。$ parent是你所期望的。您可能应该使用这样的服务，但不是解释所有这些，我的建议是使用$ rootScope来管理您的菜单。

在mainCTRL中，将$scope.menu = [];更改为$scope.$root.menu = [];

在您正在执行$scope.$parent.menu = data.data;的其他控制器中，将其更改为$scope.$root.menu = data.data;

无法设置属性菜单＆＃39;为null

2 个答案: