Question

我正在尝试显示一个箭头图标，用作“转到顶部”按钮，但仅在用户完成一些滚动之后。以前使用jquery工作的代码效果很好，但我很难用angular来达到同样的效果。此刻，箭头始终显示在屏幕的右下角。

JSfiddle here。

JS：

var myApp = angular.module('app',[]);

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
    });
}]);

HTML：

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-hide="showUpArrow" id="goUp-cont">
      <a href="#top"><i class="fa fa-arrow-up fa-4x" id="goUp"></i></a>
    </div>
  </div>
</div>

Answer 1

你需要手动$ apply（）（或$ digest（））你的范围，因为你在jquery处理程序中，所以基本上在角度循环之外。

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
        **$scope.$apply();**
    });
}]);

基本上应该解决您的问题

为了避免每个滚动事件的消耗周期很长，大部分时间都没用，你还应该检查showUpArrow的初始值，只有在值改变时触发摘要周期：

myApp.controller('ctrl', ['$scope', function($scope) {
     //detect scroll
    $(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    var oldState = $scope.showUpArrow;
        console.log(scroll);
        if(scroll>500 || scroll==undefined){
            $scope.showUpArrow = false;
        }else{
            $scope.showUpArrow = true;
        }
        if($scope.showUpArrow !== oldState) {
            $scope.$apply();
        }
    });
}]);

Answer 2

缺少来电data: ["test1", "test2", "test3"]：

columnDefs: [{
         displayName: 'Path',
         width: '99%',
    }]

请参阅updated fiddle

有关您必须执行此操作的详细信息：例如here

Angularjs - 无法根据滚动位置显示/隐藏元素

2 个答案: