为什么没有使用角度设置背景图像?

时间:2014-08-13 11:38:04

标签: javascript jquery angularjs

嗨,请你告诉我为什么我的背景图片没有设置。我需要在所有视图中设置相同的图像吗? 你能告诉我如何在不同的视图中显示不同的图像我是如何实现这一目标的吗? plunker http://plnkr.co/edit/KfY9Xo2br3AD6UOzoZlE?p=info

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular-route@1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body  ng-style="{'background-image':'url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Domestic_cat_cropped.jpg/250px-Domestic_cat_cropped.jpg)'}">
   <div ng-app="app">
      <ng-view></ng-view>
    </div>
  </body>

</html>

3 个答案:

答案 0 :(得分:2)

在ng-style之后引导应用程序是不正确的。它应该是这样的:

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="ui-bootstrap@0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular-route@1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body  ng-style="{'background-image':'url(http://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Domestic_cat_cropped.jpg/250px-Domestic_cat_cropped.jpg)'}">
   <div>
      <ng-view></ng-view>
    </div>
  </body>

</html>

Working Plunkr

答案 1 :(得分:1)

设置ng-style !!!后初始化Angular应用程序

确保在body标签上包含ng-app =“app”,你应该没问题。

答案 2 :(得分:0)

ng-app="app"从div移至html标记。