我正在转换一些代码以使用 Angular Directive(指令)。我是新来的..
旧代码是:
$('.header .mobile-nav ').append($('.navigation').html());
$('.header .mobile-nav li').bind('click', function(e) {
var $this = $(this);
var $ulKid = $this.find('>ul');
var $ulKidA = $this.find('>a');
if ($ulKid.length === 0 && $ulKidA[0].nodeName.toLowerCase() === 'a') {
window.location.href = $ulKidA.attr('href');
}
else {
$ulKid.toggle(0, function() {
if ($(this).css('display') === 'block') {
$ulKidA.find('.icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-up');
}
else {
$ulKidA.find('.icon-chevron-up').removeClass('icon-chevron-up').addClass('icon-chevron-down');
}
});
}
e.stopPropagation();
return false;
});
我尝试创作正确的指令如下:
app.directive('mobilenav', function () {
return { template: $('.navigation').html() };
});
app.directive('mobileNavMenu', function () {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
var iElement = element.find('.header .mobile-nav li');
iElement.bind('click', function (e) {
var $this = $(this);
var $ulKid = $this.find('* > ul');
var $ulKidA = $this.find('* > a');
if ($ulKid.length === 0 && $ulKidA[0].nodeName.toLowerCase() === 'a') {
window.location.href = $ulKidA.attr('href');
} else {
$ulKid.toggle(0, function () {
if ($(this).css('display') === 'block') {
$ulKidA.find('.icon-chevron-down').removeClass('icon-chevron-down').addClass('icon-chevron-up');
} else {
$ulKidA.find('.icon-chevron-up').removeClass('icon-chevron-up').addClass('icon-chevron-down');
}
});
}
e.stopPropagation();
return false;
});
}
});
未绑定(bind)“click”事件。我认为这可能是因为它没有找到该元素。我使用的方法正确吗?你能帮我修正我的指令吗?
谢谢!
最佳答案
我认为通过这种方法您可以在一些事情上做得更好。首先,我认为您的指令不应该通过 CSS 搜索或修改其他元素。
所以首先我会修改这个指令以直接绑定(bind)到传入的元素上:
function link(scope, element, attrs) {
//var iElement = element.find('.header .mobile-nav li');
iElement.bind('click', function (e) {
...
这可能意味着您需要将指令应用到与最初预期不同的元素。
接下来,对于切换 V 形的部分,我认为您可能想要以不同的方式执行此操作。例如,您可以在作用域或服务中设置一个变量,然后创建另一个指令来监视该变量并响应其中的更改。或者,您可以根据更改对元素使用 ng-show/ng-hide。
这些问题可能对您也有帮助:
关于javascript - 需要帮助让我的 Angular Directive(指令)发挥作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21635659/