Question

我面临以下问题：我正在使用Angular1.x，我有一个带有小的可点击图像的子页面以及这些图像下面的一些其他内容。
只有图像应该是可见的，所有其他的东西都应该被隐藏当用户点击图像时，此隐藏 - 可见必须翻转，因此整个图像会话被隐藏，下面的内容可见。

我有一个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>

在控制器中添加以下功能：

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

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

Answer 2

我建议使用ng-hide：

你的HTML中的

<div ng-hide="myValue"></div>
<button ng-click="show()">show</button
<button ng-click="hide()">hide</button

然后在你的javascript：

$scope.show = function(){
    $scope.myValue = false;
}

$scope.hide = function(){
    $scope.myValue = true;
}

Answer 3

当容器和盒子都可见时，是否有任何实例？如果没有，我敢说你应该对它们使用相同的变量，如下所示：

<img ng-src="{{img}}.png" ng-click="hideImage()" ng-show="imageShown">
<div ng-click="showImage()" ng-show="!imageShown">

在你的控制器中：

$scope.hideImage = function() {
    $scope.imageShown = false
}

$scope.showImage = function() {
    $scope.imageShown = true    
}

维护两个始终相互映射的值的变量似乎是不负责任的。

如何在AngularJS代码中转换此jQuery代码？

3 个答案: