角度jsベースのアプリケーションでページの背景に画像を設定する

私はAngularJSの初心者です。私は素敵な画像の背景を設定したい単純な通貨コンバータのアプリを開発しました。私はアプリに完全な背景画像を設定することはできませんよ角度jsベースのアプリケーションでページの背景に画像を設定する

<head> 

<title></title> 
</head> 
<body > 
<center> 
    <div ng-style="{'background-image':'url(https://static.vecteezy.com/system/resources/previews/000/050/156/original/9-stylish-vector-world-map-vector.jpg)'}"> 
     <div class="label" ng-controller="countryMapper" style="display:inline-block"> 

     //Internal code here 


     </div> 
    </div> 
</center> 
<script src="Scripts/angular.min.js"></script> 
<script src="app/app.module.js"></script> 
<script src="app/main.js"></script>

：これは私のUIコードです。どのように詳細にこのを行うことを教えてください

1）プロジェクト内に保存されたローカル画像を、使用している場合はURL

2）から画像を取り込むこと

出典

2016-11-07 SoulRayder

ソート済みですか？ – Sajeetharan

問題は、あなたのコードは、最初の指定されたモジュールを呼び出すことなく、コントローラを呼び出そうとしていることのように見えます！

<body ng-app="myapp"> 
<!-- ngApp needs to be here to use any controllers attached to the module! --> 

    <div ng-style="{'background-image':'url(https://static.vecteezy.com/system/resources/previews/000/050/156/original/9-stylish-vector-world-map-vector.jpg)'}"> 
    <div class="label" ng-controller="countryMapper" style="display:inline-block">

また

Check out the Plunker here!

、ちょうどさておきとして、あなたのアプリが十分背の高いであることを確認してください。それが意味するものだとして、モジュールを定義し、ソースコードでそれを含めた後、背景画像が正確に表示されます最初に画像を表示する。画像の最初の部分は白だけなので、そこにあることが全くわからないことがあります。if the div was only a few lines long!

出典

2016-11-07 19:18:42 RAM

あなたは$スコープを使用できる場合変数は

var app = angular.module('myApp', []); 
    app.controller("countryMapper", function ($scope) {  
$scope.url="https://static.vecteezy.com/system/resources/previews/000/050/156/original/9-stylish-vector-world-map-vector.jpg"; 
    });

指令

、次のディレクティブを使用して画像のURLをバインド

app.directive('backgroundImage', function() { 
    return function (scope, element, attrs) { 
     element.css({ 
      'background-image': 'url(' + attrs.backgroundImage + ')', 
      'background-repeat': 'no-repeat', 
     }); 
    }; 
});

DEMO

出典

2016-11-07 17:26:59 Sajeetharan

そして、htmlから呼び出すコードですか？ – SoulRayder

@SoulRayderデモを確認 – Sajeetharan

プロジェクトに同じコードを貼り付けるコピーを試みましたが、画像が表示されません – SoulRayder

角度jsベースのアプリケーションでページの背景に画像を設定する

答えて

関連する問題