有没有办法在 html div 上执行 ng-hide？

Question

我试图在有 ng-click 事件的地方隐藏具有 id="crossfade" 的 div。

1) 这可能吗？ 2) 我做错了什么？

<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/font-
 awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js
"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>

<body ng-controller="ContentController">

<header>
<div class="header-inner2">
    <nav>
        <ul class="center">
            <li><a ng-click="getData('SWIMWEAR')">SWIMWEAR</a></li>
            <li><a ng-click="getData('TOPS')">TOPS</a></li>
            <li><a ng-click="getData('BOTTOMS')">BOTTOMS</a></li>
            <li><a ng-click="getData('DRESSES')">DRESSES</a></li>
            <li><a ng-click="getData('SHOES')">SHOES</a></li>
            <li><a ng-click="getData('ACCESSORIES')">ACCESSORIES</a 
            </li>
        </ul>
    </nav>
</div>
</header>

<!-- crossfade images-->
<div id= "crossfade" ng-hide="getData('TOPS')">
    <img src="images/cover1.png" alt="#">
    <img src="images/cover2.png" alt="#">
    <img src="images/cover3.png" alt="#">
    <img src="images/cover4.png" alt="#">
    <img src="images/cover5.png" alt="#">
</div>

<!-- Container for grid layout -->
<div class="container">
    <div class="row">
        <div class="col" ng-repeat="x in filtered | limitTo:4">
            <img class="img-responsive1" ng-src="{{x.source}}" alt="#">
        </div>
    </div>
</div>

</body>
</html>

所以基本上，只要单击导航栏中的某些内容，我就想隐藏淡入淡出 div。

这是我正在使用的代码行：

<div id= "crossfade" ng-hide="getData('TOPS')">

所以特别是，当点击 TOPS 时隐藏 div 淡入淡出。

当我加载页面时并没有发生这种情况，我得到了我的淡入淡出和我的 TOPS 数据，但我无法点击其他任何东西。

我还尝试过 ng-if 和 ng-init。 Ng-init 几乎可以工作，但我的交叉淡入淡出没有在 angular.js 中实现它主要是 css。

Answer 1

如果它们在同一个控制器中，您只需将范围变量设置为 ng-hide。类似于：

$scope.hideCrossfade = false;

function getData(mType) {
    $scope.hideCrossfade = true;
}

在你的 html

<div id="crossfade" ng-hide="hideCrossfade">

如果您的 header 控制器和内容控制器分开，您将需要使用 $broadcast

在你的header控制器中：

$scope.getData = function(mType) {
    $scope.$broadcast('hideCrossfade', true);
};

并在您的内容控制器中

var deregisterFn = $scope.$on('hideCrossfade', function($event, hide) {
    $scope.hideCrossfade = hide;
};

Answer 2

<div id= "crossfade" ng-hide="hideCrossfade">
    <img src="images/cover1.png" alt="#">
    <img src="images/cover2.png" alt="#">
    <img src="images/cover3.png" alt="#">
    <img src="images/cover4.png" alt="#">
    <img src="images/cover5.png" alt="#">
</div>

并在控制器中设置

$scope.hideCrossfade = true;

可能在函数 getData 中。

我建议不要在 angular 中使用 ID。此外，ng-show, ng-hide, ng-if = "someFunction()" 通常也不推荐使用。

Answer 3

是的，这绝对有可能。 ng-hide 需要一个布尔值，true 或 false。 getData('Tops') 是否在您的控制器中返回布尔值？我建议使用 $scope 变量而不是函数来控制 ng-hide 的行为。因此，在您的 getData() 函数中，您可以分配如下内容：$scope.hideCrossfade = true;。

那么在你看来，就用<div id= "crossfade" ng-hide="hideCrossfade">吧。您始终可以在控制器中更改 $scope.hideCrossfade = false; 以使 div 再次可见。

Answer 4

在没有看到 getData 函数的情况下很难确切地找出问题所在，但据我所知，这里有一些建议

首先，永远不要绑定到一个函数，它很难调试并且性能代价高昂。

这是一个可行的解决方案。我建议为每个项目硬编码属性或使用数组。为了简单起见，我在这里使用了一个属性。

HTML

<header>
<div class="header-inner2">
    <nav>
        <ul class="center">
            <li><a ng-click="showSwimwear()">SWIMWEAR</a></li>
            ...
        </ul>
    </nav>
</div>
</header>

<div id= "crossfade" ng-hide="swimwearVisible">
    <img src="images/cover1.png" alt="#">
    ...
</div>

JS

swimwearVisible = false;

showSwimwear(){
    this.swimwearVisible = !this.swimwearVisible;
}

一切顺利，当您单击 link 时，div 将显示和隐藏。它还会显示当前状态以帮助您调试。

有没有办法在 html div 上执行 ng-hide？

Is there a way to do a ng-hide on a html div?

html

angularjs

ng-hide

ng-init