如何从主页面（index.html）和ng-app模块为每个部分设置背景图像

Question

我有基本布局的index.html（主页）。对于内容我正在使用ng-view和partials。

现在，除了主体的背景图像（不包括标题，导航栏和页脚的html主体）之外，所有其他剩余视图的主视图部分视图都不同，部分视图中的所有内容都呈现在由ng-view定义的特定位置。

我想知道处理这种情况的棱角分明的方法。

到目前为止，我已将整个身体分成一部分并从那里渲染出背景图像。

但我考虑设置index.html的背景，并考虑Url的位置（每个局部视图不同），并从index.html中的特定框中渲染所有部分。

你有什么建议？

Answer 1

是的，正如你所说，Angular Way是“从index.html中的特定框中渲染所有部分”。

请参阅关于路由＆amp ;;的AngularJS教程。多个视图：

https://docs.angularjs.org/tutorial/step_07

---

更新以回复评论：

创建一个新控制器：

app.controller('MyCtrl', [$scope, function ($scope) {
    $scope.bgimg = "image.jpg";
}]);

对于index.html中的“顶级”<div>：

<div ng-controller="MyCtrl" style="background-image: url({{ bgimg }})">
...
</div>

---

更新＃2以回复评论：

在部分控制器以及上面的“MyCtrl”控制器中，注入$rootScope，并使用$rootScope设置主页面的背景图像：

angular.module('MyApp').controller('Ctrl01', [$rootScope, function ($rootScope) {
    $rootScope.bgimg = "image.jpg";
}]);