Question

我使用指令在a到div的页面上实现滚动。这意味着通过点击a看起来像：

<a data-scroll-on-click="" href="#projects">Projects</a>

页面顺利滚动到：

<div id="projects">

为了实现这一点，我通过以下指令使用滚动点击属性：

consortiumApp.directive('scrollOnClick', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var idToScroll = attrs.href;
        element.on('click', function(event) {
          event.preventDefault();
          var $target;
          if (idToScroll) {
            $target = $(idToScroll);
          } else {
            $target = element;
          }
          $("body").animate({scrollTop: $target.offset().top}, 1500, 'easeInOut
        });
      }
    }
  });

preventDefault阻止路由器加入。

具有a属性的data-scroll-on-click是导航栏的一部分，我希望通过ng-include将其包含在其他页面上。但是，这意味着a元素在页面上具有scroll-on-click属性，其中滚动没有意义。这意味着当导航栏位于主页之外的其他页面上时，我希望其中的锚点像链接一样运行到主页面而不是触发滚动。

我不确定什么是好的解决方案：我不确定只有在存在某个活动控制器时才会出现scroll-on-click（某种条件属性）？或者是否可以在指令中指示当前的活动控制器？

最糟糕的是，我只会编写两个导航栏 - 一个用于通过指令实现滚动的主页面，另一个用于通过路由器实现链接的辅助页面，但我感觉有一种更简洁的方式这样做。

Answer 1

我认为您可以将布尔值与 data-scroll-on-click ='true / false'一起传递，并在指令中检查它是否为true，然后继续滚动，否则忽略它。

<a data-scroll-on-click="" href="#projects">Projects</a>

并且

consortiumApp.directive('scrollOnClick', function() {
return {
  restrict: 'A',
  link: function(scope, element, attrs) {
    var idToScroll = attrs.href;
    var scroll_needed = attrs.scrollOnClick;
    if(scroll_needed === true){
      element.on('click', function(event) {
        event.preventDefault();
        var $target;
        if (idToScroll) {
          $target = $(idToScroll);
        } else {
          $target = element;
        }
        $("body").animate({scrollTop: $target.offset().top}, 1500, 'easeInOut
      });
    }
   } 
  }
});

angularjs只有一个指令适用于选择控制器

1 个答案: