如何使用AngularJS实现这种悬停效果

Question

我在这里做的是，当我将鼠标悬停在包装器部分上时，会渲染一个叠加层，单击该叠加层会更改输入边框的 CSS 并删除输入的只读属性，反之亦然。

我已经通过许多关于使用AngularJS的动画和DOM操作的谷歌搜索和教程。但是我无法在片段中实现以下效果。实际上，我已经使用javascript和jquery在我的项目中使用了这种效果，现在我想迁移到angular，我发现在angular中进行jquery DOM操作不是一个好的做法。我无法使用角度获得这种效果。谁能帮我以棱角分明的方式做到这一点？

$('body').click(function(e){
  e.stopPropagation();
  $('.overlay').fadeIn();
  $('.wrapper input').css('border','none');
  $('.wrapper input').attr('readonly', false)
});
$('.overlay').click(function(e){
  e.stopPropagation();
  $(this).fadeOut();
  $(this).parent().find('input').css('border','1px solid grey');
  $(this).parent().find('input').attr('readonly', false);
  stop();
});
function stop(){
   $('.wrapper input').click(function(e){
      e.stopPropagation();
   });
}

body{
  height: 100%;
  width: 100%
}
.wrapper{
  position: relative;
}
.wrapper .overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;  
  z-index: 10;
}
.wrapper .overlay:hover{
  background: #000;
  opacity: 0.7;
} 
.wrapper input{
  border: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="overlay"></div>
  <input type="text" value="hello world" readonly>
  <input type="text" value="hello world" readonly>
  <input type="text" value="hello world" readonly>
  <input type="text" value="hello world" readonly>
</div>

Answer 1

所以要触发边框 + 在角度<2 中只读，你需要这个

https://plnkr.co/edit/yHtiIyISidBscAKdCWiQ?p=preview

我认为在这种情况下，您真的不需要任何jQuery DOM操作。

.HTML

<div class="wrapper" ng-class="{bordered: bordered}">
  <div class="overlay" ng-click="triggerBorders()" ng-if="!bordered"></div>
  <input type="text" value="hello world" ng-readonly="!bordered" />
  <input type="text" value="hello world" ng-readonly="!bordered" />
  <input type="text" value="hello world" ng-readonly="!bordered" />
  <input type="text" value="hello world" ng-readonly="!bordered" />
</div>

角

angular.module('app', [])
  .controller('AppController', AppController);
function AppController($scope) {
  $scope.bordered = false;
  $scope.triggerBorders = function() {
    $scope.bordered = !$scope.bordered;
  }
}

风格

body{
  height: 100%;
  width: 100%
}
.wrapper{
  position: relative;
}
.wrapper .overlay{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;  
  z-index: 10;
}
.wrapper .overlay:hover{
  background: #000;
  opacity: 0.7;
} 
.wrapper input{
  border: none
}
.wrapper.bordered input{
  border: 1px red solid;
}