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>

请放＆＃34; https：//＆＃34;所有cdn的面前。

使用这些cdn＆＃39; s：

<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

伙计，这个问题让我了。请将src替换为href标记中的link以加载自定义CSS并尝试重新加载页面。

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

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

3 个答案: