Question

我尝试在整个模板周围放置一个div标签，并使用css（如

）设置样式

<div ng-style="{'background-image': 'url(/images/food.png)', 'background-repeat': 'repeat-y'}">
    <img src="/images/final.png" class="brandImg center-block">
    <h3 class="text-center"> Please Enter your Registered Mobile Number to Login</h3>

    <form novalidate name="CSloginForm" ng-submit="loginCustomer()" role="form" class="csLoginForm col-xs-6 col-xs-offset-3">
        <div class="form-group col-xs-offset-1">
            <label for="phno" style="font: 22px sans-serif;">Mobile No</label>
            <input type="tel" name="phno" id="phno" style="margin-left: 60px; width: 300px; margin-top: 50px; margin-bottom: 20px" class="phInput" ng-maxlength="10" ng-minlength="10" ng-model="csNumber" required />
        </div>
        <div class="form-actions">
            <button type="submit" ng-disabled="CSloginForm.$invalid" class="btn btn-primary btn-lg col-xs-offset-9" ng-click="csLookUp()" style="margin-bottom: 10px">Start</button>
        </div>
    </form>
</div>

但是这只会将背景放在页面的标题部分而不是整个页面？

Answer 1

您可以使用$rootScope。根范围中的对象将传播到所有子范围。

angular.module('app').run(function($rootScope) {
  $rootScope.app = { background-image: 'url(/images/default.png)' };
});

现在，在您的基本HTML模板中，您将背景添加到正文（不是div）。

<html ng-app="app">
  <head>
    ...
  </head>
  <body ng-style="{'background-image': app.background, 'background-repeat': 'repeat-y'}">
     ...
  </body>

鉴于该视图具有控制器

<div ng-controller="PageCtrl">
  ..
</div>

您可以访问app并设置控制器的背景

angular.module('app').controller('PageCtrl', function($scope) {
  $scope.app.background = 'url(/images/food.png)';
});

您可以使用ng-init在没有控制器的视图中设置背景，但不鼓励这样做。

在angularjs中设置状态/模板的背景图像？

1 个答案: