Question

所以，我在jQuery中有一个工作函数，但后来我决定将Angular用于我的应用程序。只是找不到方法所以它只将CSS添加到一个子元素。

正在运行的Jquery代码

$('.list-div').on('mouseenter', function(){
    $(this).find('.client-jar').css('opacity','1');
  }).on('mouseleave', function() {
    $(this).find('.client-jar').css('opacity','0');
  });

当前的HTML

<ul>
        <li ng-repeat="one in ones | orderBy:'-date'">
            <div class="list-div">
                <div class="row jar-div first-jar-div" ng-mouseover="showButton()" ng-mouseleave="hideButton()">
                    <div class="col-xs-7 description-div">
                        <p class="version">{{ one.version }}</p>
                        <p class="date">{{ one.date }}</p>
                    </div>
                    <div class="col-xs-5 buttons-div">
                        <div class="list-button client-jar">
                            <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
                        </div>
                        <div class="list-button server-jar">
                            <a class="list-link">Server jar</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

和当前的Angular JS

$scope.showButton = function(){
    angular.element('.list-div').find('.client-jar').css('opacity','1');
  };

  $scope.hideButton = function(){
    angular.element('.list-div').find('.client-jar').css('opacity','0');
  };

Answer 1

我会用： https://docs.angularjs.org/api/ng/directive/ngMouseenter

<button ng-mouseenter="hoverState = true">mouse in mouse out</button>

然后使用： https://docs.angularjs.org/api/ng/directive/ngMouseleave

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false">mouse in mouse out</button>

此时你有一个悬停的标志。您现在可以使用ng-class选择此标记来设置和取消设置包含不透明度内容的CSS类，以及任何未来的CSS动画等等： https://docs.angularjs.org/api/ng/directive/ngClass

<button ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">mouse in mouse out</button>

不需要jQuery，AngularJS只是一种完全不同的方式。

<style>
.opacity-class .client-jar{
   opacity:0;
}
</style>
<ul>
        <li ng-repeat="one in ones | orderBy:'-date'">
            <div class="list-div">
                <div class="row jar-div first-jar-div" ng-mouseenter="hoverState = true" ng-mouseleave="hoverState = false" ng-class="{'opacity-class':hoverState}">
                    <div class="col-xs-7 description-div">
                        <p class="version">{{ one.version }}</p>
                        <p class="date">{{ one.date }}</p>
                    </div>
                    <div class="col-xs-5 buttons-div">
                        <div class="list-button client-jar">
                            <a class="list-link" data-toggle="modal" data-target="#myModal">create server</a>
                        </div>
                        <div class="list-button server-jar">
                            <a class="list-link">Server jar</a>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>

Answer 2

angular.module('App').directive('listFade', function() {
return function(scope, element) {

    element.bind('mouseover', function(children) {
        // YOUR ANIMATION CODE HERE
    });
    element.bind('mouseout', function(children) {
        // YOUR ANIMATION OUT CODE HERE
    });
  }
})

然后只需将指令添加到ng-repeat标记，list-fade =“”

你不需要孩子但是一个简单的方法可以召唤每个元素的孩子。这应该可以帮到你。然后摆脱ng-mouseover showButton（）;

Answer 3

更新代码以使用内联CSS，就像这样。

var element = document.querySelector('.list-div .client-jar');

$scope.showButton = function(){
  angular.element(element).css('opacity','1');
};

$scope.hideButton = function(){
  angular.element(element).css('opacity','0');
};

与AngularJS .element文档一样，它表示您需要传递一个元素。

您还可以使用ng-class，为不透明度创建一个类：

<div class="client-jar" ng-class="{class: expression}"></div>

https://docs.angularjs.org/api/ng/directive/ngClass

或使用ng-show和ng-hide进行显示控制：

<div class="client-jar" ng-show="expression"></div>

https://docs.angularjs.org/api/ng/directive/ngShow

您甚至可以将ng-style用于内联css：

<div class="client-jar" ng-style="{'opacity': '1'}"></div>

https://docs.angularjs.org/api/ng/directive/ngStyle

使用jquery在AngularJS中只选择一个子元素

3 个答案: