点击功能不适用于ng-if

时间:2018-01-08 10:28:42

标签: javascript angularjs

如果我使用如下,我得到了我需要的......这是代码。

<style>
  .moreMenu {
        position: absolute;
        right: 0px;
        z-index: 10;
        padding: 10px;
        color: #666;
        border-radius: 0 0 0 4px;
        background: #FFF;
        display: none;
        border-top: 1px solid #DDD;
    }
</style>
 <i class="fa fa-ellipsis-v tbButton otherOptions rightSide"  aria-hidden="true"></i>
    <div class="moreMenu">
          heloo
   </div>
<script>
  $(".otherOptions").click(function () {

                $(".moreMenu").slideToggle("fast");
            });
</script>

但如果我使用ng-if条件,

 <i class="fa fa-ellipsis-v tbButton otherOptions rightSide"  aria-hidden="true" ng-if="member==''"></i>

点击功能无效。

3 个答案:

答案 0 :(得分:1)

我解决了这个问题..

<i class="fa fa-ellipsis-v tbButton otherOptions rightSide"  aria-hidden="true" ng-if=members==''" ng-click="mymore()"></i>


// controller
     $scope.mymore = function(){    
        $(".moreMenu").slideToggle("fast");
    }

感谢所有人提供的信息......

答案 1 :(得分:0)

最好使用ng-click,但如果您需要使用jQuery的点击事件,则可以向主体添加已过滤的点击事件:

$('body').on('click', '.otherOptions', function() {
  $('.moreMenu').slideToggle('fast');
});

这将在主体上添加一个事件处理程序,但只有在事件从otherOptions元素冒泡时才会触发。这是一种使用jQuery事件处理动态内容的方法

答案 2 :(得分:0)

@athi是你的答案是一个正确的答案。但根据我在此处回答的问题,请使用ng-show代替ng-if

&#13;
&#13;
angular.module("a",[]).controller("ac",function($scope){
   

    });
&#13;
.otherOptions
{
color: #666;

}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="a" ng-controller="ac">
 <input class="otherOptions" type="button" value="hello" ng-click="mymore()" ng-show=true>
    <div class="moreMenu">
          heloodfg
   </div>
   </div>
 <script>
 $(".otherOptions").click(function () {
        $(".moreMenu").slideToggle("fast");
    });
 </script>
&#13;
&#13;
&#13;