我需要编写 jQuery 函数作为 AngularJS指令,但我不知道如何使用特定的jqLite函数 (最近,找到..)和 $(this)在我的指令中。
我试过这样的话:
jQuery版本:
$('.collapse-link').click(function () {
var ibox = $(this).closest('div.ibox');
var button = $(this).find('i');
var content = ibox.find('div.ibox-content');
content.slideToggle(200);
button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
setTimeout(function () {
ibox.resize();
ibox.find('[id^=map-]').resize();
}, 50);
});
我的AngularJS指令:
.directive('iboxDirective', function($timeout){
return{
restrict: 'A',
scope: {},
link: function(scope, elem){
elem.on('click', function(){
var ibox = angular.element('div.ibox');
var button = angular.element('i');
var content = angular.element('div.ibox-content');
content.slideToggle(200);
button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
// This $timeout trick is necessary to run the Angular digest cycle
$timeout(function(){
ibox.resize();
ibox.find('[id^=map-]').resize();
});
});
}
}
});
使用上述指令的HTML文件:
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Aktivitäten</h5>
<div class="ibox-tools">
<a class="collapse-link" ibox-directive>
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
Content...
</div>
</div>
这样指令会触发所有ibox div,但我想单独触发每一个。
我做错了什么?希望你能帮帮我..
答案 0 :(得分:1)
你不应该使用角度。
它可能有用,但您的代码中的注释已经告诉您原因
// This $timeout trick is necessary to run the Angular digest cycle
如果您在没有角度观察功能的情况下操作DOM,您可能会得到意想不到的结果并且在DOM元素和$ scope之间松散“连接”。
我不确定我是否正确分析了你的功能是做什么的,但这里有一个示例plunker你怎么做:link