Javascript 如何在一个页面上使用多个AngularJS指令

Javascript 如何在一个页面上使用多个AngularJS指令,javascript,jquery,angularjs,twitter-bootstrap,Javascript,Jquery,Angularjs,Twitter Bootstrap,我在angular项目中使用jquery指令 1.日期选择器 2.JScrollpane 但当我多次使用它时,它会修改同一个对象,例如。 对于日期选择器,当我从一个日期选择器中选择日期时,它会在另一个日期选择器中自动更改,类似于Jscrollpane,它的高度为第一个日期选择器 iqApp.directive('jquerydatepicker', [ function() { return function(scope, element, attrs) {

我在angular项目中使用jquery指令 1.日期选择器 2.JScrollpane 但当我多次使用它时,它会修改同一个对象,例如。 对于日期选择器,当我从一个日期选择器中选择日期时,它会在另一个日期选择器中自动更改,类似于Jscrollpane,它的高度为第一个日期选择器

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
    };
} ]);

我怀疑这里的问题是指令,而问题是哪个变量持有日期选择器的值。如果您有两个日期选择器,并且它们的值都存储在任意变量$scope.date中,那么当其中一个发生更改时,另一个也会发生更改,这得益于双向数据绑定,因此,您可能需要再次检查HTML,或者您可以编辑您的问题并将其包括在内

我通过对基于固定元素的高度进行一些更改,最终解决了问题:

(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
        };
    } ]);
})();
Scope:True指令获取一个新的作用域