Question

我正在尝试在我的两个独立部分的主体上设置不同的背景图像。

我找到了这个链接，但它似乎没有回答如何为单独的部分做到这一点：

How to set body attribute in css using angularjs?

以下是我正在使用的内容：

的index.html：

<html ng-app="cocktails">
<head>
    <meta charset="UTF-8">
    <title>cocktails</title>
    <script src="assets/lib/angular.js"></script>
    <script src="assets/lib/angular-route.min.js"></script>
    <script src="assets/lib/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="app/app.module.js"></script>
    <script src="app/app.routes.js"></script>
    <script src="app/partials/recipeDetails/recipeDetailsController.js"></script>
    <script src="app/partials/recipeList/recipeListController.js"></script>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div ng-view></div>
</body>
</html>

ListController：

recipeControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
    $http.get('app/data.json').success(function(data) {
        $scope.recipe = data;
        $scope.recipeOrder = 'name';
    });
}]);

ListView.html：

<div>
    <h1>Recipes</h1>
    <input ng-model="query" placeholder="Search for recipes, ingredients..." autofocus>
    <label>Spirit:
        <select ng-model="spiritOrder">
            <option value="name">Name</option>
            <option value="spirit">Whiskey</option>
        </select>
    </label>
    <label>
        <input type="radio" ng-model="direction" name="direction" checked>
        ascending
    </label>
    <label>
        <input type="radio" ng-model="direction" name="direction" value="reverse">
        descending
    </label>
</div>
<ul>
    <li class="list" ng-repeat="item in recipe | filter: query | orderBy: recipeOrder:direction"> 
        <a class="link" href="#/recipeDetailsView/{{recipe.indexOf(item)}}">
            <div class="item">
                <img class="listImage" ng-src="assets/img/{{item.shortName}}.jpg" />
                <p class="listName">{{item.name}}</p>
            </div>
        </a>
    </li>
</ul>

我有另一个DetailView将获得单独的背景图片，我正在使用$routeProvider来配置路由。

使用AngularJS的每个部分的不同背景图像

0 个答案: