AngularJSを使用してこのホバー効果を達成する方法は？

Question

私がここでやっていることは、オーバーレイがレンダリングされているラッパーセクションにマウスを移動し、そのオーバーレイをクリックすると入力枠のCSSが変更され、入力の読み取り専用属性が削除されます。

AngularJSを使ったアニメーションやDOM操作に関する多くのGoogle検索とチュートリアルを終えました。しかし、私はスニペットで次のような効果を得ることはできません。実際に私はjavascriptとjqueryを使用して私のプロジェクトでこのエフェクトを使用しましたが、現在は角度に移行したいので、角度で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; 
    } 
} 

スタイルは、任意のDOMのmanipualtionを行いたい場合は、あなたがそれを行うことができます

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