javascript - Angular : ngView and functions not working right away?

Question

在我的网站上，如果您向下滚动到显示“Victorious Gaming”的第三部分并将鼠标悬停在左右箭头上，则不会显示任何文字。但是，第二次及之后将鼠标悬停在箭头上时，文本会正确显示。为什么他们第一次不工作？当您将鼠标悬停在“Victorious Gaming”文本上时也是如此

在我的 Controller 中，我有:

projectApp.controller("featuredController", ["$rootScope", "$scope", function ($rootScope, $scope) {
    $scope.leftArrow = function(){
      $(function(){
        $(".left-arrow a").hover(function(){

          $('.left-info').css('opacity','1');

        }, function(){
           $('.left-info').css('opacity','0');

        });
      });
    };
    $scope.rightArrow = function(){
      $(function(){
        $(".right-arrow a").hover(function(){

          $('.right-info').css('opacity','1');

        }, function(){
           $('.right-info').css('opacity','0');

        });
      });
    };

$scope.bigWords = function(){

       $(function(){
  $(".big-word-padding").hover(
      function() {
    $('.blur-background').fadeOut(700);
    $('.big-word-padding').find('h2').css('color','blue');
    $('.color-blue').css('color','white');

  }, function() {
    $('.blur-background').fadeIn(300);
     $('.big-word-padding').find('h2').css('color','white');
     $('.color-blue').css('color','blue');

  });
    $(".big-word-padding").hover(
      function() {
    $('.blur-background').fadeOut(700);
    $('.big-word-padding').find('.m-title').css('color','white');
     $('.big-word-padding').find('#manga-title').addClass('textShadowM');
     $('.big-word-padding').find('.m-title').addClass('textShadowManga');
    $('.color-blue').css('color','white');

  }, function() {
    $('.blur-background').fadeIn(300);
     $('.big-word-padding').find('.m-title').css('color','rgb(26, 107, 156)');
$('.big-word-padding').find('#manga-title').removeClass('textShadowM');
     $('.big-word-padding').find('.m-title').removeClass('textShadowManga');
     $('.color-blue').css('color','blue');

  });
});
};
}]);

我的 HTML:

<div class="ng-container" ng-controller="featuredController">
<div ng-view class="view-animate">

</div>
</div>

外部 HTML 文件(templates/featured-proj.html):

  <div class="big-feature">
    <div class="big-background second-background"></div>
    <div class="blur-background second-background"></div>
    <div class="big-word">
      <div class="big-word-padding" ng-mouseover="bigWords()">
      <h2> Victorious <span class="color-blue">Gaming</span></h2>
      <h3>UI Developer. Design.</h3>
      <hr>
      <a href="http://league.victoriousgaming.com/landing" target="_blank"><i class="fa fa-caret-right fa-3x" aria-hidden="true" id="arrow-project"></i></a>
      </div>
    </div>
    <div class="left-arrow">
        <a href="#/feature3" ng-mouseover="leftArrow()"><i class="fa fa-angle-left" aria-hidden="true"></i></a>

    </div>
     <div class="left-info">
        My Art
      </div>
    <div class="right-arrow">
        <a href="#/feature2" ng-mouseover="rightArrow()"><i class="fa fa-angle-right" aria-hidden="true"></i></a>

    </div>
        <div class="right-info">
        Mangahere
      </div>
<!--      <ul class="nav navbar-nav navbar-right">
       <li><a href="#/feature"><i class="fa fa-shield"></i> Home</a></li>
        <li><a href="#/feature2"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#/feature3"><i class="fa fa-comment"></i> Contact</a></li>
      </ul> -->



      <div class="info-vic">
        <div class="row-vic">
            <div class="left-vic"></div>
            <div class="right-vic"></div>
        </div>
        <div class="row-vic">
            <div class="left-vic"></div>
            <div class="right-vic"></div>
        </div>
                <div class="row-vic">
            <div class="left-vic"></div>
            <div class="right-vic"></div>
        </div>
      </div>
  </div>

还有我的路由配置:

 projectApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/feature', {
        templateUrl : 'templates/featured-proj.html'
      })

      // route for the about page
      .when('/feature2', {
        templateUrl : 'templates/featured-proj-2.html'
      })

      // route for the contact page
      .when('/feature3', {
        templateUrl : 'templates/featured-proj-3.html'
      })
       .otherwise( { redirectTo: '/feature' } );
  }]);

Answer 1

首先，您在 leftArrow() 和 rightArrow() 中都有一个额外的 $(function(){ ... }) 包装器>.

此外，只有在第一次调用这些函数时才会设置悬停效果。在该调用期间，不透明度不会被修改。

我会将 ng-mouseover="leftArrow()" 替换为 ng-mouseenter="leftArrowShow()"ng-mouseleave="leftArrowHide()" 然后像这样定义这些函数:

$scope.leftArrowShow = function() {
    $('.left-info').addClass('show');
};
$scope.leftArrowHide = function() {
    $('.left-info').removeClass('show');
};

然后，在 CSS 中，有:

.left-info.show {
    opacity: 1;
}

rightArrow() 将以类似的方式处理。