Angularjs

Question

我正在使用 Angularjs 以便在 DOM 中显示一些图像，并对它们应用一些样式（使背景变暗）。看来我无法将 ng-style 应用于 img 标签。这是什么原因？

HTML:

<div ng-controller="MyController">
    <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
          <div class="rel">
             <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" ng-style="{'background':'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+post.link+')','background-size': 'cover'}"> 
          <li class="del">button</li><li class="getLink">get link</li>
          </div>
    </div>
  </div>   
</div>

CSS:

.del{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
}

.getLink{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  right: 0;
  bottom: 0;
}
.rel{
  position: relative;
    height: auto;
    width: auto;
    display: inline-block;
}

Answer 1

我不认为 ng-style 是这样运作的。你可以看到例子 here and here.

试试这个：

在html中：

<img ng-style="yourStyle">

在控制器中：

$scope.yourStyle =
{
    'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
    'background-size': 'cover'
}

希望对您有所帮助。

Answer 2

请尝试以下操作：

HTML:

<div ng-controller="MyController">
<div class="row">
    <div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
      <div class="rel">
        <div class="cover-img">
          <img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" style="background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));background-image: url('{{post.link}}');background-size: cover">
        </div> 
      <li class="del">button</li><li class="getLink">get link</li>
      </div>
</div>

CSS:

.del{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  left: 0;
  bottom: 0;
}

.getLink{
  font-size: 15px;
  color: black;
  z-index: 10;
  text-decoration: none;
  padding: 5px 10px;
  background-color: white;
  position: absolute;
  right: 0;
  bottom: 0;
}
.rel{
  position: relative;
    height: auto;
    width: auto;
    display: inline-block;
}

.cover-img{
   position:relative;
}
.cover-img:before{
   content:'';
   background: rgba(69, 71, 94, 0.53);
   position:absolute;
   left:0;
   right:0;
   bottom:0;
   top:0;
   width:100%;
   height:100%;
}

Angularjs - 无法将 ng-style 应用于 img 标签（使用 ng-repeat）

Angularjs - Unable to apply ng-style to img tag (using ng-repeat)

ng-style