角度显示滚动不起作用

当我点击show5，然后goto5它按预期工作，但是当我点击showngo5它不按预期工作，即使调用相同的方法。角度显示滚动不起作用

为什么showngo5在此plunker

HTML工作：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-example51-production</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body ng-app="anchorScrollOffsetExample" ng-controller="headerCtrl"> 
    <div class="fixed-header"> 
    <a href="" ng-click="gotoAnchor(x.i)" ng-repeat="x in ids" ng-show="x.visible"> 
     goto{{x.i}} 
    </a><br/> 
    <a href="" ng-click="toggle(x)" ng-repeat="x in ids"> 
     <span ng-show="x.visible">hide</span><span ng-show="!x.visible">show</span>{{x.i}} 
    </a><br/> 
    <a href="" ng-click="showngo(x)" ng-repeat="x in ids"> 
     <span ng-show="x.visible">hide</span><span ng-show="!x.visible">showngo</span>{{x.i}} 
    </a> 
    </div> 
    <div id="anchor{{x.i}}" class="anchor" ng-repeat="x in ids" ng-show="x.visible"> 
    Anchor {{x.i}} of 5 
    </div> 
</body> 
</html>

JS：

(function(angular) { 
    'use strict'; 
angular.module('anchorScrollOffsetExample', []) 
    .run(['$anchorScroll', function($anchorScroll) { 
    $anchorScroll.yOffset = 100; // always scroll by 50 extra pixels 
    }]) 
    .controller('headerCtrl', ['$anchorScroll', '$location', '$scope', 
    function ($anchorScroll, $location, $scope) { 
     $scope.ids = [ 
     {i:1,visible:true}, 
     {i:2,visible:true}, 
     {i:3,visible:true}, 
     {i:4,visible:true}, 
     {i:5,visible:false} 
     ]; 
     $scope.toggle = function(x) { 
     if(x.visible){ 
      x.visible=false; 
     }else{ 
      x.visible=true; 
     } 
     }; 
     $scope.showngo = function(x) { 
     $scope.toggle(x); 
     $scope.gotoAnchor(x); 
     }; 
     $scope.gotoAnchor = function(x) { 
     var newHash = 'anchor' + x; 
     if ($location.hash() !== newHash) { 
      $location.hash('anchor' + x); 
     } else { 
      $anchorScroll(); 
     } 
     }; 
    } 
    ]); 
})(window.angular);

CSS：

body { 
    padding-top: 100px; 
} 
.anchor { 
    background-color: DarkOrchid; 
    margin: 2px; 
    padding: 10px 10px 300px 10px; 
} 

.fixed-header { 
    background-color: rgba(0, 0, 0, 0.2); 
    height: 100px; 
    position: fixed; 
    top: 0; left: 0; right: 0; 
} 

.fixed-header > a { 
    display: inline-block; 
    margin: 5px 15px; 
}

来源

2016-05-16 Anand Rockzz

变化对行＃这个代码25的JS文件

$scope.gotoAnchor(x.i);

的问题是你试图通过x对象为gotoAnchor功能而不是一个数字。

来源

2016-05-16 09:47:02 mtamma

这是一个很愚蠢的问题，晚上不眠夜的问题..谢谢 –

更新showngo功能由以下代码。问题在于，当你在showngo方法中调用$scope.gotoAnchor(x);时，它将滚动到anchor[Object,Object]而不是滚动anchor5，因为整个对象在x内部传递。

$scope.showngo = function(x) { 
    $scope.toggle(x); 
    $scope.gotoAnchor(x.i); 
};

来源

2016-05-16 10:04:47

角度显示滚动不起作用

回答

相关问题