角を表示するスクロールが機能しない

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);

問題ファイル

変更は、あなたではなく、その後gotoAnchor関数に番号をXオブジェクトを渡すことにしてみてくださいです。

出典

2016-05-16 09:47:02 mtamma

このような愚かな問題だったのは、後半の眠れない夜の問題..ありがとう –

更新showngo以下のコードで機能します。あなたのコードの問題は、xの中にオブジェクト全体が渡されているため、anchor5の代わりにanchor[Object,Object]にスクロールされ、showngoメソッドの中で$scope.gotoAnchor(x);を呼び出すと問題になります。

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

出典

2016-05-16 10:04:47

角を表示するスクロールが機能しない

答えて

関連する問題