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

Question

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

我浏览了很多关于使用 AngularJS 进行动画和 DOM 操作的谷歌搜索和教程。但是我无法在sn-p中实现以下效果。实际上，我在我的项目中使用 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

所以要在 angular

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