AngularJS custom directive and controller method are not working and do not reach breakpoints in chrome browser

Question

AngularJS custom directive and controller method are not working and do not reach breakpoints in chrome browser

69 Views Asked by DasaAnudas At 14 January 2024 at 16:22

AngularJS custom directive and controller method are attached to md-fab scroll-back-to-top button. The md-fab button is made visible as soon as page is scrolled down and gets hidden when pages reached top. My problem is custom directive not working therefore md-fab button is not made visible on scrolling down. If I change md-button css property visibility to visible and scroll page down then on clicking md-fab button does not respond to scroll back to top of the page.

I started facing this problem since I only reshuffled the same working code in index.html file.

I am unable to trace this problem for a few days. Appreciate some expert guidance to fix this issue telling where I am going wrong.

mainCtrl method

(function() {
  angular.module('mainApp')
  .controller('mainCtrl', function($scope, $window) {
    $scope.scrollTop = function () {
      $window.scrollTo(0, 0);
    };
  } 
})();

Custom Directive

(function() {
  angular
  .module("mainApp")
  .directive("scrollToTop", function ($window) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
      angular.element($window).bind("scroll", function() {
        if (this.pageYOffset > 0) {
          element.css({visibility: 'visible'});
        } else {
          element.css({visibility: 'hidden'});
        }
      });
     }
   }
 });
})();

HTML

<body layout="row" ng-controller="mainCtrl" ng-cloak>
  <md-sidenav>
  </md-sidenav>
  <main layout="column" flex aria-hidden="false">
    <md-toolbar layout-padding class="app-toolbar">
    </md-toolbar>
    <md-content md-scroll-y flex>
      <div ui-view flex="noshrink" ng-hide="data.error">
      </div>
      <div flex="noshrink" ng-show="data.error">
      </div>
      <button 
      type="button" 
      class="md-fab md-fab-bottom-right md-button md-ink-ripple" 
      draggable scroll-to-top 
      ng-click="scrollTop()" 
      style="position: fixed; visibility: hidden;" aria-label="Back to   Top">
        <md-tooltip>Draggable Scroll Back to Top</md-tooltip>
        <md-icon md-svg-src="img/material/ic_expand_less-24px.svg" aria-hidden="scrollBackToTop button">
        </md-icon>
      </button>
    </md-content>
  </main>
</body>`

Original Q&A

There are 2 best solutions below

Rory LM On 15 January 2024 at 02:32

Without testing, I think the $scope from mainController isn't making it down to scroll-to-top, so it can't find the method to call for it's ng-click. Hence why it stopped working when you reshuffled your index.html

Instead you could try give scroll-to-top it's own controller, and isolating its scope

(function() {
  angular
  .module("mainApp")
  .directive("scrollToTop", function ($window) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
      angular.element($window).bind("scroll", function() {
        if (this.pageYOffset > 0) {
          element.css({visibility: 'visible'});
        } else {
          element.css({visibility: 'hidden'});
        }
      });
     },
     // ==== give scrollToTop its own controller: ====
     controller: function($scope, $window) {
      $scope.scrollTop = function () {
        $window.scrollTo(0, 0);
      };
    },
    scope: {} // ==== Give scrollToTop its own isolated scope for clarity ====
   }
 });
})();

**Naren Murali** · Accepted Answer · 2024-01-15T04:50:12.530000

You do not have the window scrolling because the scrolling is taken care of by md-content of angular material, so please change your code to handle the scroll of md-content instead of the window!

Note: The JS fiddle works, I am adding the snippet for code reference!

jsfiddle

angular.module('mainApp', ['ngMaterial']);
angular.module('mainApp')
  .controller('mainCtrl', function($scope, $window) {
    $scope.scrollTop = function(container) {
      console.log(container)
      $window.document.querySelector('md-content').scrollTop = 0;
    };
  });

angular
  .module("mainApp")
  .directive("scrollToTop", function($window) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        const parent = element.parent();
        angular.element(parent).bind("scroll", function(event) {
          if (event.target.scrollTop > 0) {
            element.css({
              visibility: 'visible'
            });
          } else {
            element.css({
              visibility: 'hidden'
            });
          }
        });
      }
    }
  });

.scroll-to-top {
  position: fixed !important;
  background-color: red !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.expand-up {
  font-size: 40px !important;
  color: white;
}

<link href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css" rel="stylesheet"/>
<body layout="row" ng-app="mainApp" ng-controller="mainCtrl" ng-cloak>
  <md-sidenav>
  </md-sidenav>
  <main layout="column" flex aria-hidden="false">
    <md-toolbar layout-padding class="app-toolbar">
    </md-toolbar>
    <md-content ng-ref="container" md-scroll-y flex>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta, tellus vitae ultricies lacinia, ante ante tempus libero, id pharetra lacus magna nec odio. Donec a interdum ipsum. Nam a luctus diam, vel ornare tortor. Morbi lobortis lectus sed urna mollis, eu facilisis velit lacinia. Sed volutpat congue gravida. Fusce tempus augue id lacus rutrum iaculis. In quis mauris tristique, mollis ipsum eu, feugiat ligula. Curabitur in tellus dignissim, blandit mi et, pulvinar ex. Nunc euismod ante eu tortor imperdiet scelerisque. Ut eget libero erat. Vivamus consectetur luctus consequat. In hac habitasse platea dictumst. Donec laoreet in orci a tempus. Duis non sodales leo. Phasellus semper, lorem eu finibus lacinia, metus ante sagittis lorem, non lacinia ligula diam in metus.

      Nam iaculis neque est, at malesuada diam scelerisque id. Nulla lacinia sagittis diam sed luctus. In commodo sit amet ligula egestas faucibus. Aenean sit amet lorem ut lacus consequat sollicitudin sit amet sit amet libero. Sed facilisis augue quis commodo convallis. Aliquam scelerisque malesuada sapien, quis cursus sem accumsan quis. Fusce fringilla felis sit amet eros volutpat malesuada a ac sapien. Ut id ullamcorper tellus. Pellentesque tellus ante, volutpat at quam in, ultrices faucibus massa. Fusce tristique leo ac odio accumsan elementum. Quisque in lorem sit amet libero vulputate cursus quis a ligula.

      Donec dapibus fringilla ante, id feugiat velit tincidunt nec. Nunc sem augue, lobortis ut malesuada vitae, viverra sed quam. Vivamus faucibus ligula nec nulla blandit posuere. Aliquam vehicula, quam ut pellentesque suscipit, nisl risus tincidunt enim, eget interdum quam erat eu quam. Phasellus condimentum magna quis molestie iaculis. Phasellus mollis ut nunc ullamcorper posuere. Pellentesque sed purus in nisi hendrerit imperdiet. Praesent ultrices ornare ipsum, ut tristique dolor convallis ut.

      Duis bibendum quam vitae turpis porta, id placerat sapien convallis. Fusce efficitur malesuada sem, eget iaculis nunc molestie in. Vivamus sit amet lacus nec nisi luctus rhoncus at tempus lectus. Praesent ultrices tincidunt purus volutpat ullamcorper. Vivamus pulvinar, sem sit amet vehicula venenatis, orci ante sodales ex, eget egestas lectus nisi et mauris. Nulla scelerisque quis magna vitae mollis. Aliquam tincidunt tincidunt mauris, in ultrices tellus luctus nec.

      In tincidunt metus libero, vitae tempus justo commodo vel. Phasellus sodales bibendum quam. Nunc viverra at turpis sit amet auctor. Maecenas non hendrerit sem. Sed pulvinar sem ac lorem suscipit varius. Pellentesque ac leo vitae mi imperdiet vehicula eu vel nulla. Fusce nec dapibus mauris, sed vulputate urna. Nunc quam leo, porta non imperdiet non, iaculis vel dui. Phasellus commodo non est id dignissim. Suspendisse lorem nibh, rhoncus vitae sapien at, porta tempus augue. Morbi egestas ligula sit amet volutpat bibendum. Phasellus lacinia pellentesque felis, a laoreet enim tincidunt vitae.
      <div ui-view flex="noshrink" ng-hide="data.error">
      </div>
      <div flex="noshrink" ng-show="data.error">
      </div>
      <button type="button" class="md-fab md-fab-bottom-right md-button md-ink-ripple scroll-to-top" draggable scroll-to-top ng-click="scrollTop(container)" style="position: fixed; visibility: hidden;background-color: red" aria-label="Back to   Top">
        <i class="material-icons expand-up">expand_less</i>
        <!--  <md-tooltip>Draggable Scroll Back to Top</md-tooltip> -->
        <!-- <md-icon md-svg-src="img/material/ic_expand_less-24px.svg" aria-hidden="scrollBackToTop button"> -->
      </button>

    </md-content>
  </main>
</body>

<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

AngularJS custom directive and controller method are not working and do not reach breakpoints in chrome browser

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in METHODS

Related Questions in ANGULAR-MATERIAL

Related Questions in DIRECTIVE

Trending Questions

Popular # Hahtags

Popular Questions