在angularjs中設置狀態/模板的背景圖像？

我試圖把周圍的整個模板div標籤，並用CSS樣式像在angularjs中設置狀態/模板的背景圖像？

<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>

但這隻會使背景在頁面而不是整個頁面的頁眉部分？

來源

2015-08-28 carelesslyChoosy

其中'div'已使用 –

頂部div作爲單獨的行在頂部 – carelesslyChoosy

是其他'div'是在'div'裏面還是什麼？你能創造一個小提琴嗎？ –

您可以使用$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>

您可以從控制器

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

您可以在一個視圖中的背景無控制器訪問app，並設置背景使用ng-init，但這是不鼓勵。

來源

2015-08-28 10:07:51

在angularjs中設置狀態/模板的背景圖像？

回答

相關問題