角度显示滚动不起作用
[英]Angular Show An Scroll not working
问题描述
When I click on show5 and then goto5 it works as expected, but when I click on showngo5 its not working as expected, even though the same methods are called. 
当我单击show5然后转到goto5时，它按预期方式工作，但是当我单击showgo5时，即使调用了相同的方法，它也无法按预期方式工作。
Why is showngo5 not working in this plunker 为什么showgo5无法在此插件中工作
html: 的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: 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: 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;
}
2 个解决方案
解决方案1
1 已采纳 2016-05-16 09:47:02
change this code on line #25 JS file 在第25行JS文件上更改此代码
$scope.gotoAnchor(x.i);
The problem is you try to passing x object into gotoAnchor function rather then a number. 问题是您尝试将x对象传递给gotoAnchor函数而不是数字。
解决方案2
1 2016-05-16 10:04:47
Update showngo function by below code. 通过以下代码更新showngo函数。 issue in your code is that when you call $scope.gotoAnchor(x); 您代码中的问题是，当您调用$scope.gotoAnchor(x); inside showngo method it will scroll to anchor[Object,Object] instead of scrolling anchor5 because whole object is passed inside x . 在showgo方法内部，它将滚动到anchor[Object,Object]而不是滚动anchor5因为整个对象都在x内部传递。
$scope.showngo = function(x) {
$scope.toggle(x);
$scope.gotoAnchor(x.i);
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.