Question

我试图隐藏我的div，其中有id =“crossfade”，其中有一个ng-click事件。

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需要一个布尔值，无论是true还是false。 getData('Tops')在控制器中返回一个布尔值吗？我建议使用$ scope变量而不是函数来控制ng-hide的行为。因此，在getData()函数中，您可以指定类似：$scope.hideCrossfade = true;的内容。

然后在您看来，只需使用<div id= "crossfade" ng-hide="hideCrossfade">即可。您可以随时更改控制器中的$scope.hideCrossfade = false;以使div再次可见。

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中。

我建议不要在角度中使用ID。此外，ng-show，ng-hide，ng-if =＆＃34; someFunction（）＆＃34;通常也不鼓励。

Answer 3

如果没有看到self.addChildViewController(searchVC) self.scrollView.addSubview(searchVC.view) searchVC.didMoveToParentViewController(self)功能，有点难以弄清楚到底出了什么问题，但是从我能看到的内容看，还有一些建议

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

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

<强> HTML

getData

<强> JS

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

当您点击链接时，所有内容都会显示和隐藏。它还会显示当前状态以帮助您进行调试。

Answer 4

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

$scope.hideCrossfade = false;

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

并在你的HTML中

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

如果您的页眉控制器和内容控制器被拆分，您将需要使用$ broadcast

你的headerController中的

：

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

并在您的内容控制器中

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

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

4 个答案: