Угловые директивы collision

Question

Я хотел бы использовать 2 директивы в том же приложении. Проблема в том, что, когда я использую второй, первый сбой с уродливой ошибкой: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Первой директивой является угловое-fullpage.js (https://github.com/hellsan631/angular-fullpage.js), а второе - угловая бутстрап-аффикс-реализация (https://github.com/maxisam/angular-bootstrap-affix).

Когда я включаю оба модуля (директивы), директива fullpage вылетает с устраненной ошибкой. Если я удалю директиву affix, то fullpage.js работает нормально (просто удалив вторую директиву из модулей).

Как избежать столкновения с директивой? Есть ли какие-либо обходные пути для этой проблемы или я должен просто согласиться только на одну из директив?

Спасибо !!!!

app.js:

var myApp = angular 
    .module(
    'myApp', 
    [ 
     'ngRoute', 
     'ngAnimate', 
     'ngMessages', 
     'ui.bootstrap', 
     'angular-loading-bar', 
     'LocalStorageModule', 
     'ngEnter', 
     'ng-Static-Include', 
     'ngResource', 
     'toastr', 
     'ng-Static-Include', 
     'pageslide-directive', 
     'ngRutChange', 
     'xmsbsStopPropagation', 
     'ngEnter', 
     'ng-rut', 
     'ngMessages', 
     'duScroll', 
     'dynamicNumber', 
     'xmsbsDirectives', 
     'salfaDirectives', 
     'mgcrea.bootstrap.affix', 
     'fullPage.js', 
     'ui.tinymce', 
     'mega-menu', 
     'bootstrap.fileField', 
     'ngTagsInput' 
    ]); 

Частичный вид (дом) пытаются использовать директиву и Вся страница порождающие ошибки:

<div class="section"> 
    <div ng-style="{'width': '100%', 'height': vm.divHeight+'px'}" style="margin-top:-7px;background:url(/content/images/03.jpg) center center; background-size:cover;"> 
     <div class="col-sm-12"> 
      <h1 class="fg-grayLight text-center text-shadow vert-align-center" style="z-index:2;" ng-style="{'padding-top':vm.divHeight/9+'px'}">sistema de recursos humanos 2.0</h1> 
     </div> 
    </div> 
</div> 
<div class="section"> 
    <div class="col-sm-12"> 
     <h2 class="text-center">noticias</h2> 
    </div> 
</div> 

аффикс директиву:

'use strict'; 

angular.module('mgcrea.bootstrap.affix', ['mgcrea.jquery']) 

    .directive('bsAffix', function($window, dimensions) { 

    var checkPosition = function(instance, el, options) { 

     var scrollTop = window.pageYOffset; 
     var scrollHeight = document.body.scrollHeight; 
     var position = dimensions.offset.call(el[0]); 
     var height = dimensions.height.call(el[0]); 
     var offsetTop = options.offsetTop * 1; 
     var offsetBottom = options.offsetBottom * 1; 
     var reset = 'affix affix-top affix-bottom'; 
     var affix; 

     if(instance.unpin !== null && (scrollTop + instance.unpin <= position.top)) { 
     affix = false; 
     } else if(offsetBottom && (position.top + height >= scrollHeight - offsetBottom)) { 
     affix = 'bottom'; 
     } else if(offsetTop && scrollTop <= offsetTop) { 
     affix = 'top'; 
     } else { 
     affix = false; 
     } 

     if (instance.affixed === affix) return; 

     instance.affixed = affix; 
     instance.unpin = affix === 'bottom' ? position.top - scrollTop : null; 

     el.removeClass(reset).addClass('affix' + (affix ? '-' + affix : '')); 
    }; 

    var checkCallbacks = function(scope, instance, iElement, iAttrs) { 
     if(instance.affixed) { 
     if(iAttrs.onUnaffix) 
      eval("scope." + iAttrs.onUnaffix); 
     } 
     else { 
     if(iAttrs.onAffix) 
      eval("scope." + iAttrs.onAffix); 
     } 
    }; 

    return { 
     restrict: 'EAC', 
     link: function postLink(scope, iElement, iAttrs) { 
     var instance = {unpin: null}; 

     angular.element($window).bind('scroll', function() { 
      checkPosition(instance, iElement, iAttrs); 
      checkCallbacks(scope, instance, iElement, iAttrs); 
     }); 

     angular.element($window).bind('click', function() { 
      setTimeout(function() { 
      checkPosition(instance, iElement, iAttrs); 
      checkCallbacks(scope, instance, iElement, iAttrs); 
      }, 1); 
     }); 
     } 
    }; 

    }); 

Вся страница директивы (для этой директивы требуется, чтобы исходный jQuery fullpage lugin работал http://www.alvarotrigo.com/fullPage/):

(function() { 
    'use strict'; 

    angular 
     .module('fullPage.js', []) 
     .directive('fullPage', fullPage); 

    fullPage.$inject = ['$timeout']; 

    function fullPage($timeout) { 
     var directive = { 
      restrict: 'A', 
      scope: { options: '=' }, 
      link: link 
     }; 

     return directive; 

     function link(scope, element) { 
      var pageIndex; 
      var slideIndex; 
      var afterRender; 
      var onLeave; 
      var onSlideLeave; 

      if (typeof scope.options === 'object') { 
       if (scope.options.afterRender) { 
        afterRender = scope.options.afterRender; 
       } 

       if (scope.options.onLeave) { 
        onLeave = scope.options.onLeave; 
       } 

       if (scope.options.onSlideLeave) { 
        onSlideLeave = scope.options.onSlideLeave; 
       } 
      } else if (typeof options === 'undefined') { 
       scope.options = {}; 
      } 

      var rebuild = function() { 
       destroyFullPage(); 

       $(element).fullpage(sanatizeOptions(scope.options)); 

       if (typeof afterRender === 'function') { 
        afterRender(); 
       } 
      }; 

      var destroyFullPage = function() { 
       if ($.fn.fullpage.destroy) { 
        $.fn.fullpage.destroy('all'); 
       } 
      }; 

      var sanatizeOptions = function (options) { 
       options.afterRender = afterAngularRender; 
       options.onLeave = onAngularLeave; 
       options.onSlideLeave = onAngularSlideLeave; 

       function afterAngularRender() { 
        //We want to remove the HREF targets for navigation because they use hashbang 
        //They still work without the hash though, so its all good. 
        if (options && options.navigation) { 
         $('#fp-nav').find('a').removeAttr('href'); 
        } 

        if (pageIndex) { 
         $timeout(function() { 
          $.fn.fullpage.silentMoveTo(pageIndex, slideIndex); 
         }); 
        } 
       } 

       function onAngularLeave(page, next, direction) { 

        if (typeof onLeave === 'function' && onLeave(page, next, direction) === false) { 
         return false; 
        } 
        pageIndex = next; 

       } 

       function onAngularSlideLeave(anchorLink, page, slide, direction, next) { 

        if (typeof onSlideLeave === 'function' && onSlideLeave(anchorLink, page, slide, direction, next) === false) { 
         return false; 
        } 
        pageIndex = page; 
        slideIndex = next; 

       } 

       //if we are using a ui-router, we need to be able to handle anchor clicks without 'href="#thing"' 
       $(document).on('click', '[data-menuanchor]', function() { 
        $.fn.fullpage.moveTo($(this).attr('data-menuanchor')); 
       }); 

       return options; 
      }; 

      var watchNodes = function() { 
       return element[0].getElementsByTagName('*').length; 
      }; 

      scope.$watch(watchNodes, rebuild); 

      scope.$watch('options', rebuild, true); 

      element.on('$destroy', destroyFullPage); 
     } 
    } 

})(); 

Answer 1

Второй зависит от первого? Если это так, вы компилируете директиву до внедрения второй?

Если у вас есть «столкновение», это означает, что вы используете какой-то «использование строгой», было бы более ценным, если бы вы продемонстрировали часть кода и посмотрели, является ли transclude частью директивы.