Angular.js：10671 TypeError：无法读取undefined的属性

我试图通过遵循一门课程学习角度，并且我没有太多的JavaScript经验。我似乎无法让ng-class工作，并且看不出为什么我会在标题中提到错误。这是我hotels.js文件：Angular.js：10671 TypeError：无法读取undefined的属性

'use strict' 

//MODULE 
var app = angular.module('hotelsApp', ['ngRoute']); 

app.controller('HotelsController', ['$scope', function($scope){ 
$scope.rooms = mockRooms; 

$scope.promoted = function(room) { 
    if(room.promotion !== null && room.promotion !== undefined) { 
     return true; 
    } else { 
     return false; 
    } 
} 

$scope.booking = function(room){ 
    if(room.beds>1){ 
    alert(room.size + " with " + room.beds + " beds, is booked"); 
    } 
    else 
    alert(room.size + " with " + room.beds + " bed, is booked"); 
}; 

}]); 

var mockRooms = [{ 
    "size": "studio", 
    "beds": 2, 
    "number": 100, 
    "kitchen": true, 
    "price": "100$", 
    "booked": false, 
    "promotion" : { 
     "discount" : "30%", 
     "message" : "Reserve it today!", 
     "price" : "70$" 
    }  
}, 
{ "size": "queen", 
    "beds": 2, 
    "number": 101, 
    "kitchen": true, 
    "price": "35$", 
    "booked": true }  
];

，这是我的index.html：

<!DOCTYPE html> 
<html lang="en-us" ng-app="hotelsApp"> 
<head> 
<title>Hotels app</title> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<meta charset="UTF-8"> 

    <!-- load bootstrap and fontawesome via CDN --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
<link rel="stylesheet" type="text/css" src="css/main.css" /> 
<script src="//code.angularjs.org/1.3.0-rc.2/angular.js"></script> 
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"> </script> 
</head> 
<body ng-controller="HotelsController"> 
    <div ng-repeat="room in rooms"> 
    <h4>{{ room.size }}</h4> 
    <p>Beds: {{ room.beds }}</p> 
    <p>Room number: {{ room.number }}</p> 
    <p ng-show="room.kitchen"> 
    Kitchen available 
    </p> 
    <p ng-hide="room.promotion"> 
    Price: {{ room.price }} 
    </p> 
    <p ng-class="{heavy:promoted(room)}" ng-hide="!room.promotion"> 
    Save {{ room.promotion.discount }} {{ room.promotion.message }} Price: {{ room.promotion.price }} 
    </p> 
    <button ng-hide="room.booked" ng-click="booking(room)">Book now!</button> 
</div> 

<script src="app/hotels/hotels.js"></script> 
</body>

来源

2016-04-14 Marco

除ng-class之外的其他所有工作都按预期工作？ –

是的，其他一切正常工作 – Marco

纠正这些线路。您的链接已全部损坏：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
<link rel="stylesheet" type="text/css" src="css/main.css" /> 
<script src="//code.angularjs.org/1.3.0-rc.2/angular.js"></script> 
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"> </script>

请在所有cdn的前面加上“https：//”。

使用这些CDN的：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />  
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>

来源

2016-04-14 13:11:48 Deadpool

我照你所说的做了，但它没有改变任何东西。 – Marco

兄弟见我的快照。我想你只想要这个？ – Deadpool

我希望它能够将类.heavy应用于p元素，即使在我使用cdn时也不会发生 – Marco

这是一个愚蠢的错误，如果我在链接改变的main.css，SRC到HREF，一切工作正常。只是不知道为什么控制台之前抛出一个未定义属性的错误，这让我困惑。

<link rel="stylesheet" type="text/css" href="css/main.css" />

来源

2016-04-14 13:44:47 Marco

男人，这个问题得到了我。请将src替换为href的link标签，用于加载您的自定义CSS并尝试重新加载页面。

除了你的CSS没有加载，一切都正确。

来源

2016-04-14 13:46:46

是的，正如我在我的回答中所写的那样，我发现那是错误的，只是不知道为什么控制台首先抛出该错误，并且以后所有工作都很好。 – Marco

Angular.js：10671 TypeError：无法读取undefined的属性

回答

相关问题