javascript - 从 Controller 内部 Angular 滚动到元素

Question

我需要从 Controller 内部滚动到一个元素。

使用 du-smooth-scroll 和 href="#invoice-wrapper" 在 Angular html 页面内的按钮和其他元素上效果很好。

<button du-smooth-scroll href="#invoice-wrapper"> 

<!--Invoice Form-->
<div id="invoice-wrapper"></div>

有没有办法从 Controller 内部激活相同的东西？

vm.scrollTo = (element) => {
    du-smooth-scroll(element) 
}

或者类似的东西？有办法吗？

Answer 1

您可以使用 $scope.$broadcast 并从指令中捕获事件，但这只有在您的 View 中存在 du-smooth-scroll 时才有效.

// in your controller
vm.scrollTo = (element) => {
  $scope.$broadcast("du-smooth-scroll", element);
};

// in your directive
$scope.$on("du-smooth-scroll", function (element) {
  // call your function that does that scroll
});

如果您想要另一种方式，我建议创建一个全局 scrollTo 函数，该函数可以在您的指令和 Controller 或任何地方使用

$rootScope.scrollTo = function (element) {
  // do the scroll thing
};

然后只需在 Controller 和指令中调用 $rootScope.scrollTo(element) 即可。