angularjs类不起作用

时间:2016-06-13 11:10:47

标签: javascript css angularjs

我对angularjs更加精简,我在下面做了一个简单的页面,在那里我有一个名为" item"我试图把它交给div,但它不起作用,但同时如果我给内联样式那么它会起作用。

可能是什么问题,请有人帮助我

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="KACApp">
  <div id="layoutContainer" ng-controller="layoutController as ctrl" style="height:100%">
    <div layout="row" layout-xs="column">
      <div flex class="item">Item</div>
      <div flex="20">Item 2</div>
    </div>
  </div>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
  <style>
    .item {
      background: "#073857";
    }
  </style>
  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('KACApp', ['ngMaterial'])
      .controller('layoutController',layoutController)
      .run(function() {
        console.log('App is ready');
      });

      function layoutController($scope){

      }
  </script>
</body>
</html>

2 个答案:

答案 0 :(得分:5)

只需删除“你的风格,它就会起作用:

.item {
  background: "#073857";
}

更改为 - &gt;

.item {
  background: #073857;
}

答案 1 :(得分:0)

试试这个

.item {
  background: #073857;
}

请参阅Plunker