【问题标题】:All Bookmarks are redirecting to same element所有书签都重定向到同一个元素
【发布时间】:2017-09-03 10:57:55
【问题描述】:

我有三个书签,两个在同一页面上,一个在不同页面上,当我单击链接时,它会移动到相同的元素并且不流畅。
我使用的框架作品是materializecss、angularjs 1和ui router
我不知道如何为它编写代码。

myapp.controller('ctrl',ctrl);
ctrl.$inject=['$scope', '$location', '$anchorScroll'];
function ctrl($scope, $location, $anchorScroll) {
    $scope.scrollTo = function(team) {
      $location.hash('team');
      $anchorScroll();
    };
    
    $scope.scrollTo = function(contact) {
      $location.hash('contact');
      $anchorScroll();
    };
};
<body ng-controller="ctrl">

<div class="container">
	<div class="fixed-action-btn toolbar">
    <a class="btn-floating btn-large light-blue accent-2 pulse">
      <i class="large material-icons">menu</i>
    </a>
    <ul>
      <li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li>
      <li class="waves-effect waves-light"><a ng-click="scrollTo(home/project)">PROJECTS</a></li>
      <li class="waves-effect waves-light"><a ng-click="scrollTo(team)">TEAM</a></li>
      <li class="waves-effect waves-light"><a ng-click="scrollTo(contact)">CONTACT</a></li>
    </ul>
  </div>
</div>

感谢您的帮助。
谢谢。

【问题讨论】:

  • 我已经为您提供了答案,您可以这样做吗?

标签: angularjs ctrl


【解决方案1】:

你不需要在控制器中添加多个scrollTo函数,你可以像这样只使用一个函数

myapp.controller('ctrl', ctrl);
ctrl.$inject = ['$scope', '$location', '$anchorScroll'];

function ctrl($scope, $location, $anchorScroll) {
    $scope.scrollTo = function(state) {
        $location.hash(state);
        $anchorScroll();
    }
};

而html是

<body ng-controller="ctrl"> 
  <div class="container">   
    <div class="fixed-action-btn toolbar"> 
      <a class="btn-floating btn-large light-blue accent-2 pulse"> <i class="large material-icons">menu</i> </a> 
      <ul> 
        <li class="waves-effect waves-light"><a ui-sref="home">HOME</a></li> 
        <li class="waves-effect waves-light"><a ng-click="scrollTo('home/project')">PROJECTS</a></li> 
        <li class="waves-effect waves-light"><a ng-click="scrollTo('team')">TEAM</a></li>
        <li class="waves-effect waves-light"><a ng-click="scrollTo('contact')">CONTACT</a></li>
      </ul> 
    </div> 
  </div>
</body>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-09-27
    • 2015-08-11
    • 1970-01-01
    • 2019-10-21
    • 1970-01-01
    • 2020-12-07
    • 2016-10-06
    相关资源
    最近更新 更多