скрыть дочерний элемент при выводе мыши из родительского DIV - AngularJs

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 с классом «share-icon», когда указатель мыши выходит из родительского DIV (т.е. DIV с классом ideaResult), но в то же время я нажимаю на DIV с именем класса «shareBtn», что приведет к переключение этих трех DIV с классом «share-icon», который работает нормально.

Проблема –

Когда страница загружена, эти три DIV (т.е. класс «share-icon») уже скрыты, что нормально, но когда я нажимаю на DIV с классом «shareBtn», эти DIV появляются, что тоже хорошо, но когда указатель мыши выходит из родительского DIV ("ideaResult"), эти три DIV продолжают появляться, чего я не хочу.

Может ли кто-нибудь помочь мне решить эту проблему? заранее спасибо

Вот имитация скрипки — https://jsfiddle.net/x2zzppoa/


javascript html angularjs ng-show ng-hide
person sajalsuraj    schedule 02.02.2016    source источник
comment
В функции $scope.hideIcon установите для $scope.socialIcon значение false.   -  person Zeeshan Hassan Memon    schedule 02.02.2016
comment
@ZeeshanHassanMemon.. Я пробовал, но это не сработало   -  person sajalsuraj    schedule 02.02.2016
comment
Каково ваше первоначальное определение класса share-icon?   -  person ronapelbaum    schedule 02.02.2016
comment
Изначально для класса share-icon ничего не определено. Он автоматически скрывается при загрузке страницы @ronapelbaum   -  person sajalsuraj    schedule 02.02.2016
comment
есть ли лучший способ, чем использовать ng-class @georgeawg   -  person sajalsuraj    schedule 02.02.2016
comment
Я обновил вопрос .. @georgeawg   -  person sajalsuraj    schedule 02.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Видимость этих трех элементов div связана не с классом «share-icon», а с классом $scope.socialIcon, для которого изначально установлено значение undefined, а после того, как вы щелкнете верхний элемент div, для него будет установлено значение true, следовательно, видимость ваших элементов div.

Решение для этого фрагмента кода, вероятно, таково:

ng-mouseleave="socialIcon = false"

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

person ronapelbaum    schedule 02.02.2016
comment
вы можете попробовать создать изолированный jsfiddle на plunkr и т. д.? - person ronapelbaum; 02.02.2016
comment
поэтому просто добавьте ng-mouseleave=socialIcon = false. jsfiddle.net/ronapelbaum/x2zzppoa/1 - person ronapelbaum; 02.02.2016