需要帮助我的角度指令工作

Question

我正在转换一些代码以使用角指令。我是新来的..

旧代码是：

    $('.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;
        });
    }
});

"点击"事件没有被绑定。我认为可能是因为它找不到元素。我使用正确的方法吗？你能帮我修理我的指示吗？

谢谢！

Answer 1

我认为使用这种方法可以做得更好。首先，我认为您的指示不应搜索或修改CSS的其他元素。

因此，首先我会修改该指令以直接绑定在元素中的传递：

中

function link(scope, element, attrs) {
    //var iElement = element.find('.header .mobile-nav li');
    iElement.bind('click', function (e) {
        ...

这可能意味着您需要将指示应用于与最初预期的不同元素。

接下来，对于切换人字形的部分，我认为您可能想以不同的方式执行此操作。例如，您可以在范围中设置变量，或者在服务中设置一个变量，然后创建另一个指令，该指令观察变量并响应其更改。另外，您也许可以根据更改对元素使用ng-show/ng-hide。

这些问题也可能对您有所帮助：

指令之间共享数据

将CSS从AngularJS