javascript - 如何将此 jQuery 代码转换为 AngularJS 代码？

Question

我面临以下问题:我正在使用 Angular1.x，并且我有一个子页面，其中包含可点击的小图像以及这些图像下方的一些其他内容。
只有图像应该可见，所有其他内容都应该隐藏。
当用户单击图像时，此隐藏可见部分必须翻转，因此整个图像 session 将隐藏，下面的内容将可见。

我有一个 jQuery 解决方案，但我正在寻找一种更语义化的 Angular 解决方案。

(function($){

 $(document).ready(function(){

   $('.showOverlay').click(function(){
     $('#container').hide();
     $('#box').show();
  });

  $('.hideOverlay').click(function(){
    $('#container').show();
    $('#box').hide();
  });
});


})(jQuery);

我希望这段代码能够解释背后的想法。

Answer 1

当您点击“显示叠加层”时，它将调用 showOverlay() 函数，与“隐藏叠加层”相同:

<div ng-click="showOverlay()">Show overlay</div>
<div ng-click="hideOverlay()">Hide overlay</div>

<div ng-show="container">Shown when $scope.container is true</div>
<div ng-show="box">Shown when $scope.box is true</div>

在 Controller 中添加以下功能:

$scope.showOverlay = function() {
    $scope.container = false;
    $scope.box = true;
}

$scope.hideOverlay = function() {
    $scope.container = true;
    $scope.box = false;
}