Question

我试图让页面根据他们点击的内容转到页面的div部分。我有每个部分的div用正确的标签id'd。我已经完成了一个测试，我可以在其中加载页面并输入url.com/services#insertidhere，它将转到正确的位置。问题是，当我尝试在状态下实现它时，它不会到达该位置。即使显示的URL正确，它也会正常进入页面。

HTML索引代码段

<div ng-repeat="x in blue.services">
    <div class="wrapIMG">
        <img src="{{x.icon}}" />
        <img class="clone" src="{{x.icon}}" />
    </div>
    <h4>{{x.title}}</h4>
    <hr/>
    <p>{{x.text}}</p>
    <a ui-sref="services({id: x.title})" class="button2">About This</a>
</div>

myapp.js代码段

app.config(function($stateProvider){
    $stateProvider
        .state('index', {
          url:"/",
            templateUrl: 'main.html',
            data: {
                cssId: 'home'
            }
        })
        .state('services', {
            url: "/services/#:id",
            templateUrl: 'services.html',
            data: {
                cssId: 'services'
            }
        })
});

服务HTML代码段

<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>
<section class="no-padding" style="" id="[id equal to x.title]"> ...</section>

我认为问题必须与.state网址一致，但它在网址中正确显示，但它不会转到该位置。

Answer 1

Angular使用URL中的#进行页面路由（许多其他SPA框架也是如此）。

要将链接锚定到网页上的特定ID，请使用$anchorScroll service。

示例：

<div id="scrollArea" ng-controller="ScrollController">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>

<script>
  angular.module('anchorScrollExample', [])
  .controller('ScrollController', ['$scope', '$location', '$anchorScroll',
    function($scope, $location, $anchorScroll) {
      $scope.gotoBottom = function() {
        // set the location.hash to the id of
        // the element you wish to scroll to.
        $location.hash('bottom');

        // call $anchorScroll()
        $anchorScroll();
      };
    }]);
</script>

Answer 2

$scope.toPage = function(){$state.go('index');}

你试过这个吗？

网页没有锚定在Angular中

2 个答案: