Question

我是AngularJS的新手。我开发了一个简单的货币转换器应用程序，我想设置一个很好的图像背景。这是我的UI代码：

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

我无法为应用设置完整的背景图片。请告诉我如何详细

1）如果从网址

获取图片

2）如果使用保存在项目中的本地图像

Answer 1

您可以使用$ scope变量使用以下指令

绑定图像URL

    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";
    });

<强>指令

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

<强> DEMO

Answer 2

问题似乎是你的代码试图在没有先调用指定模块的情况下调用控制器！在定义模块并将其包含在源代码中之后，背景图像完全按照其意图显示：

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

另外，请放心，确保您的应用 tall 足以显示图像;请记住，图片的第一位只是白色，所以你根本无法看到它在那里if the div was only a few lines long!

在基于角度js的应用程序中将图像设置为页面背景

2 个答案: