Question

我正试图'掩盖'一个图像，把它变成一个圆圈。下面的代码加载，调整大小并显示图像，但没有圆圈。

在我的html div中，它引用了我的控制器：

ng-style='obj.avatar_style'

在我的控制器中：

$scope.obj.avatarURL = UserModel.getAvatarURL();

$scope.obj.avatar_style = {'width': '30px', 'height': '30px', 'border-radius': '15px', 'background-image': 'url(' + $scope.obj.avatarURL + ')', 'background-size': '30px 30px'}

Answer 1

我希望这是你想要的东西，你可以自己添加其他款式。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.avatar_style = {
    'border-radius': '50px'
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <img src="http://revistasindromes.com/images/100x100.gif" ng-style="avatar_style">
</body>

</html>

Answer 2

ngStyle用于设置各个样式元素。在您的情况下，您应该将大多数样式移动到例如在样式表中使用.avatar类，然后在你的html中使用这样的

<div class="avatar" ng-style="{'background-image': $scope.obj.avatarURL}">

掩盖图像作为angularjs中的圆圈

2 个答案: