指令

Question

我有指令，基本上是一个按钮，只能在某些条件下显示。它使用addEventListener('scroll')来捕获包含页面中<ion-content>元素的滚动。这适用于一个页面/视图，但是当导航到另一个页面/视图时，不会触发滚动事件？

'use strict';
angular.module('Fmpclient')
  .directive('fmpRefreshButton', ['$window', '$ionicScrollDelegate', 'RefreshButtonService', function ($window, $ionicScrollDelegate, RefreshButtonService) {

        var hideDelayTime = 3500;
        var isButtonVisible = false;
        var lastYPos = 0;    // store the last Y Position
        var timerId = null;  // store a setTimeout id for later use
        var $scrollEl = null;
        var refreshButton = null;

/* __ code snipped for brevity __ */

        /**
          Work out the direction of scroll so we can
          either hide or show the refresh button according to AC
          @method onScroll
          @public
        */
        function onScroll () {
          var scrollTop = $ionicScrollDelegate.getScrollPosition().top;

          if(scrollTop > lastYPos) {
            // Scrolling DOWN - hide refresh button
            hideRefreshButton();
          } else {
            // Scrolling UP - show refresh button
            shouldRefreshFeed();
          }
          // Store the last Y position to determine
          // direction of scroll on next iteration
          lastYPos = scrollTop;
        }

        /**
          Setup directive elements on init
          @method init
          @public
        */
        function init (){
          console.log('directive::init()');

          RefreshButtonService.setRefreshFeed(false);

          $scrollEl = document.getElementById('ionContentScroll');

          if($scrollEl){
            $scrollEl.addEventListener('scroll', onScroll);
          }
        }

        function _link(scope, element) {
          refreshButton = element[0];

          init();
        }

        return {
            templateUrl: 'app/app/refresh-button/refresh-button.directive.html',
            restrict: 'AE',
            scope: true,
            link: _link,
        };
    }
]);

Answer 1

正如Scott所建议的那样，在上面的评论中，我的相当简单的问题的解决方案是将id作为参数传递给指令，以确保id对于每种用法都是唯一的：

在指令范围内：

scope: {
   scrollElement: '='
},

并传入指令模板：

<my-directive scroll-element="ionFeedScroll">