Question

我在angular项目中使用jquery指令 1. Datepicker 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
    };
} ]);

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

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

2 个答案: