Angular.js：10671 TypeError：无法读取未定义的属性

Question

我正在尝试通过学习课程来学习角度知识，但是我在JavaScript方面没有太多经验。 我只是似乎无法让ng-class正常工作，也看不到为什么我出现标题中提到的错误。 这是我的hotels.js文件：

 '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>

Answer 1

更正这些行。 您的链接全部断开：

<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>

Answer 2

这是一个愚蠢的错误，如果我更改了main.css，src到href的链接，则一切正常。 只是不确定为什么控制台之前会抛出未定义属性的错误，这让我感到困惑。

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

Answer 3

老兄，这个问题让我明白了。 请使用link标记中的href替换src ，以加载您的自定义CSS，然后尝试重新加载页面。

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

Angular.js：10671 TypeError：无法读取未定义的属性

问题描述

3 个解决方案

解决方案1
0 2016-04-14 13:11:48

解决方案2
0 2016-04-14 13:44:47

解决方案3
0 2016-04-14 13:46:46

Angular.js：10671 TypeError：无法读取未定义的属性

问题描述

3 个解决方案

解决方案1 0 2016-04-14 13:11:48

解决方案2 0 2016-04-14 13:44:47

解决方案3 0 2016-04-14 13:46:46

解决方案1
0 2016-04-14 13:11:48

解决方案2
0 2016-04-14 13:44:47

解决方案3
0 2016-04-14 13:46:46