I need to scroll to an element from inside the controller.
Using the du-smooth-scroll and the href="#invoice-wrapper" works fine on buttons and other elements inside the angular html page.
<button du-smooth-scroll href="#invoice-wrapper">
<!--Invoice Form-->
<div id="invoice-wrapper"></div>
Is there a way to activate the same thing from inside the controller?
vm.scrollTo = (element) => {
du-smooth-scroll(element)
}
Or something like that? Is there a way?
You can make use of $scope.$broadcast and catch the event from the directive though this will only work if du-smooth-scroll is present in your view.
// 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
});
I you want another way I suggest creating a global scrollTo function which can be used in both your directive and controller or anywhere
$rootScope.scrollTo = function (element) {
// do the scroll thing
};
then just simply call $rootScope.scrollTo(element) in your controller and your directive.
You could use the built-in $anchorScroll like so:
$anchorScroll('invoice-wrapper');
