Javascript 如何在一个页面上使用多个AngularJS指令
我在angular项目中使用jquery指令 1.日期选择器 2.JScrollpane 但当我多次使用它时,它会修改同一个对象,例如。 对于日期选择器,当我从一个日期选择器中选择日期时,它会在另一个日期选择器中自动更改,类似于Jscrollpane,它的高度为第一个日期选择器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) {
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指令获取一个新的作用域