Question

当我将鼠标放在图像上时，我想看到一个div，如果我离开鼠标，使用ng-mouseenter和ng-mouseleave将其删除。但是当我加载我的页面时，在div中出现class =＆＃34; ng-hide＆＃34;。

我的代码：

<nav class="navbar-default navbar-side" role="navigation" ng-app="panel" ng-controller="panelController">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li class="text-center">
                    <img ng-mouseenter="inProfile()" ng-mouseleave="outProfile()" src="{{ asset('image/id1.jpg') }}" class="user-image img-responsive"/>

                    <div ng-show="panelController.evento">
                        Hi!!
                    </div>

                </li>

                <li>
                    <a  href="index.html"><i class="fa fa-dashboard fa-3x"></i><span class="text-20">Dashboard</span></a></a>
                </li>
                <li>
                    <a  href="ui.html"><i class="fa fa-users fa-3x"></i><span class="text-20">Usuarios</span></a>
                </li>
                <li>
                    <a href="tab-panel.html"><i class="fa fa-lightbulb-o fa-3x padding-left-10"></i><span class="text-20 padding-left-10">Emprendedores</span></a></a>
                </li>
                <li>
                    <a  href="chart.html"><i class="fa fa-money fa-3x"></i><span class="text-20">Inversores</span></a></a>
                </li>
                <li>
                    <a  href="table.html"><i class="fa fa-newspaper-o fa-3x"></i><span class="text-20">Noticias</span></a></a>
                </li>
            </ul>

        </div>

    </nav>

    <script>
        var tfc = angular.module('panel', []);

        tfc.controller ( 'panelController' , [ '$scope' , function($scope){

            $scope.inProfile = function(){
                $scope.evento = "true";
            }

            $scope.outProfile = function(){
                $scope.evento = "false";
            }
        }])
    </script>

Answer 1

您的问题是页面加载eventto值是未定义的，这就是ng-show表达式在页面加载时隐藏值的原因。您应该将evento值定义为true以显示它。您可以通过控制器执行此操作，也可以在视图上使用ng-init="panelController.evento=true"

并确保，您应该使用布尔而不是字符串，用于ng-show中的表达式评估。

<强>代码

var tfc = angular.module('panel', []);

tfc.controller('panelController', ['$scope', function($scope) {

    $scope.inProfile = function() {
        $scope.evento = true;
    }

    $scope.outProfile = function() {
            $scope.evento = false;
    }
    //init values
    $scope.evento = true;
}]);

<强>更新

您应该在视图中直接访问范围变量的值，因为您在应用程序中没有使用controllerAs，它应该是evento而不是panelController.evento

<强>标记

<div ng-show="evento">
   Hi!!
</div>

angularjs ng-show =＆＃34; true＆＃34;但仍然有class =＆＃34; ng-hide＆＃34;

1 个答案: