在父 DIV 的鼠标移出时隐藏子元素 - AngularJs

Question

HTML -

<div class="col-md-3" ng-repeat="idea in ideas">
    <div class="col-md-12 ideaResult" ng-mouseleave="hideIcon()">         
                <a class="resultCover col-md-12" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.coverImage}});"></a>    
                <div class="sharebtn icon-btn" ng-click="socialIcon = !socialIcon">  
                        <span style="background-image:url('/images/idea/share-add.png');background-color:white" title="Share" class="iconContainer"></span>
                </div>
                <div class="share-fb share-icon" ng-show="socialIcon">              
                        <span class="iconContainer" title="Share" style="background-image:url('/images/idea/fb-icon.png');background-color:white"></span>
                </div>
                <div class="share-tw share-icon" ng-show="socialIcon">
                        <span class="iconContainer" title="Share" style="background-image:url('/images/idea/twitter-icon.png');background-color:white"></span>
                </div>
                <div class="share-msg share-icon" ng-show="socialIcon">     
                        <span class="iconContainer" title="Share" style="background-image:url('http://cdn.thegadgetflow.com/wp-content/themes/thegadgetflow4/images/email-icon.png');background-color:white"></span>
                </div>  
                <div class="endorse-icon icon-btn">      
                        <span style="background-image:url('/favicons/favicon-96x96.png');background-color:white" title="Endorse" class="iconContainer"></span>
                </div> 
                <div class="resultIcon">
                    <span title="my goal" class="iconContainer" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.goalIcon}});background-color:{{idea.backgroundColor}}">
                    </span>    
                </div>
                <h2 class="resultName"><a href="/{{idea.customUrl}}">{{idea.title}}</a></h2>                      
                <div class="col-md-12 resultDescription"><p>{{idea.description | limitTo: 48}}{{idea.description.length > 48 ? '...' : ''}}<a href="/{{idea.customUrl}}">Continue Reading</a></p></div>                        
            </div>
 </div>

控制器 JS -

$scope.hideIcon = function(){ 
    $scope.socialIcon = false;       
};

要求 -

当鼠标指针离开父 DIV（即带有类 ideaResult 的 DIV）时，我想隐藏带有“share-icon”类的 DIV，但同时我点击了类名为“shareBtn”的 DIV将导致使用“share-icon”类切换这三个 DIV，这工作正常。

问题 -

加载页面时，这三个 DIV（即“share-icon”类）已经隐藏，这很好，但是当我单击带有“shareBtn”类的 DIV 时，这些 DIV 会出现，这也很好，但是当鼠标指针离开父DIV（“ideaResult”）时，这三个DIV继续出现，我不想要。

有人可以帮我解决这个问题吗？提前致谢

这是模拟小提琴 - https://jsfiddle.net/x2zzppoa/

Answer 1

这 3 个 div 的可见性与“share-icon”类无关，而是与$scope.socialIcon 相关，初始设置为undefined，单击上方的 div 后，它设置为 true，因此你的 div 的可见性。

这段代码sn-p的解决方案大概是：

ng-mouseleave="socialIcon = false"

https://jsfiddle.net/ronapelbaum/x2zzppoa/1/