Angular Route and labels

Question

Angular Route and labels

Navigation

#1 by (1 votes)

0

I have AngularJS configured with Ng Route. When you find me for example on the page

craft/content/#!/

and I want to move to a div within the same page for example

<div id='caja'></div>

I can not use

craft/content/#!/#caja

since what it does is reload the page, in which way it could make a displacement like this

html angularjs

asked by Fabián Chinchilla 28.07.2017 в 01:20

source

1 answer

How to show the details of a record in a view, that are different from NULL? Tables are traveling down

score 1 · Accepted Answer

I'll copy an example of the official documentation , you have to inject $ anchorScroll

angular.module('anchorScrollOffsetExample', [])
.run(['$anchorScroll', function($anchorScroll) {
  $anchorScroll.yOffset = 50;   // always scroll by 50 extra pixels
}])
.controller('headerCtrl', ['$anchorScroll', '$location', '$scope',
  function($anchorScroll, $location, $scope) {
    $scope.gotoAnchor = function(x) {
      var newHash = 'anchor' + x;
      if ($location.hash() !== newHash) {
        // set the $location.hash to 'newHash' and
        // $anchorScroll will automatically scroll to it
        $location.hash('anchor' + x);
      } else {
        // call $anchorScroll() explicitly,
        // since $location.hash hasn't changed
        $anchorScroll();
      }
    };
  }
]);

body {
  padding-top: 50px;
}

.anchor {
  border: 2px dashed DarkOrchid;
  padding: 10px 10px 200px 10px;
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="anchorScrollOffsetExample">

<div class="fixed-header" ng-controller="headerCtrl">
  <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
    Go to anchor {{x}}
  </a>
</div>
<div id="anchor{{x}}" class="anchor" ng-repeat="x in [1,2,3,4,5]">
  Anchor {{x}} of 5
</div>
</div>