angularjs - 如何根据 url 或路由更改应用程序的背景图像？

Question

我想根据 url 更改应用程序的背景图像（Html Body）。这我只想在 angularJS 中做:)

例如：

1）如果用户访问这样的网址，

www.domain.com/view1 _

波纹管图像显示

2) 如果用户访问 url www.domain.com/view2

我想显示其他图像

应用程序.js

  var app = angular.module('app', []);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }])

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
}]);;

控制器.js

 app.controller('MyCtrl1',function($scope){
    $scope.viewBackground="body"
    console.log($scope.viewBackground);
})

app.controller('MyCtrl2',function($scope){
    $scope.viewBackground="profile"
})

在部分html中，我只是这样做

    <div class="span12">


            <p>

           {{$scope.viewBackground}}zxz
            </p>

    </div>

但由于某种原因，我无法获得viewBackground属性值的值。

Answer 1

我不确定我是否理解正确，但我希望如此。您有 2 个选项。

首先，对每个页面view1和view2使用不同的控制器。并在页面上使用 ng-class 指令：

HTML：

<!-- "page" View 1 -->
<div ng-controller="View1Ctrl">
    <div ng-class="viewBackground"> View 1 </div> 
</div>

<!-- "page" View 2 -->
<div ng-controller="View2Ctrl">
    <div ng-class="viewBackground"> View 2 </div> 
</div>

JS：

var app = angular.module('app', []);

function View1Ctrl($scope) {
    $scope.viewBackground = "background-small"
}    

function View2Ctrl($scope) {
    $scope.viewBackground = "background-big"
}    

在你的CSS上：

.background-small{
    height:200px;
    width:200px;
    background: url('...img1...');
}

.background-big{
    height:400px;
    width:400px;
        background: url('...img2...');
}

第二个选项 - 使用.run块，您将在其中添加一些逻辑来更改 bg-image，但这是一个糟糕的选择

Answer 2

如果您的控制器可以检查 $routeParams 参数，然后设置范围变量来控制背景图像。

function announcements_detail_controller($scope, $rootScope, $routeParams, $http, $location)
{  //console.log($routeParams);
   $scope.css_class_for_background_image = 'xxxx';//

}