Как использовать несколько директив AngularJS на одной странице

Question

Я использую директивы Jquery в угловом проекте 1. Datepicker 2. JScrollPane , но когда я использую несколько раз он изменил тот же объект, например, в случае выбора даты, когда я выбираю дату от одного выбора даты автоматически изменяется в другой аналогичной для JScrollPane она занимает высоту 1 один

iqApp.directive('jquerydatepicker', [ function() { 
     return function(scope, element, attrs) { 
      element.datepicker({ 
       inline: true, 
       dateFormat: scope.format, 

       changeMonth: true, 
       changeYear: true, 
       showOn: 'button', 
       buttonImageOnly: true 
      }); 
     } 
} ]); 

iqApp.directive('jscrollpane', [ function() { 
    function link(scope, element, attr) { 

     var $window = $(window); 
     var $element = $(element), api; 

     $element.jScrollPane(); 
     api = $element.data('jsp'); 

     $window.on("touchstart mousemove resize", function onLoad() { 
      var _finalHeight = $window.height() - $element.offset().top; 
      $('.jspContainer').height(_finalHeight); 
      api.reinitialise(); 
     }); 
    } 

    return { 
     restrict : 'A', 
     link : link 
    }; 
} ]); 

Answer 1

Я сомневаюсь, что директивы вопросов здесь, скорее, вопрос, который переменная содержит значение для date picker, например. Если у вас есть два сборщика дат, и их значения сохраняются в произвольной переменной $scope.date, тогда, когда кто-то изменится, другой изменится так же, как и вежливость двусторонняя привязка данных, так что вы можете дважды проверить свой HTML или вы может изменить свой вопрос, и включают в себя, что хорошо

Answer 2

я, наконец, решить эту проблему, сделав некоторые изменения на основе фиксированного элемента высоты:

(function() { 
    'use strict'; 
    iqApp.directive('jscrollpane', [ '$timeout', function($timeout) { 
     function link(scope, element, attr) { 

      var $window = $(window); 
      var $element = $(element), api; 

      $element.jScrollPane(); 
      api = $element.data('jsp'); 

      $window.on("resize mousemove touchstart", function onLoad() { 

       var _finalHeight = $window.height() - $element.offset().top; 
       $(element).find('.jspContainer').height(_finalHeight); 
       api.reinitialise(); 
      }); 

      var timeout = $timeout(function() { 
       //console.log('dr load timer'); 
       var _finalHeight = $window.height() - $element.offset().top; 
       $(element).find('.jspContainer').height(_finalHeight); 
       api.reinitialise(); 
      }, 1000); 
     } 

     return { 
      restrict : 'A', 
      link : link 
     }; 
    } ]); 
})();