Question

我正在将我的代码转换为angular，我需要帮助创建一个指令。我想转换以下

jQuery(document).ready(function ($) {
"use strict";

$('#cool-navigation').append('<ul class="navigation">' + $('.navigation').html() + '</ul>');
});

到

app.directive('coolnavigation', function () {
    return { template: '<ul class="navigation">' + $('.navigation').html() + '</ul>' };
});

这是HTML。第一个视图是shell，第二个视图叫做topnav

<section data-cc-sizer data-ng-controller="shell as vm">

<!-- Sticky Nav -->
<div data-coolnavigation class="sticky-navigation" id="sticky-navigation"></div>
<!-- Sticky Nav -->

<div id="wrapper">
    <div class="top_wrapper clearfix">
        <header class="top-header shadow">
            <div data-ng-include="'/app/layout/topnav.html'"></div>
        </header>
    </div>
</div>
<section id="content">
    <div id="wrapper" data-ng-view></div>
</section>
</section>

<section  data-cc-topnav data-ng-controller="topnav as vm">

<div class="container">
    <div class="row header">
        <div class="col-class">
            <nav>
                <ul class="navigation">
                    <li data-ng-repeat="r in vm.navRoutes">
                        <a href="#{{r.url}}" class="{{r.className}}" data-ng-bind-html="r.config.settings.content"></a>
                    </li>
                </ul>

            </nav>
        </div>
    </div>
</div>

</section>

我想我错过了.html（）。有人可以帮我解决这个问题吗？

谢谢！

Answer 1

您在模板中引用了$('.navigation')，这是一个包含一些Angular代码的HTML块。您的模板无法保证Angular已经渲染了这一点，这就是我们首先使用指令的原因。这就是$（'。navigation'）为空的原因。如果你试图从jQuery转换它，那么停止使用jQuery。

指令具有link函数，该函数在编译后发生。想想jQuery中的link函数，如document.ready，但是对于特定的元素或指令。当然，你试图引用一个完全不同的元素，所以你不知道什么时候完成。这指出了一个更大的问题...为什么要尝试将DOM从一个结构复制到另一个结构？只需将DOM放在模板中并将其称为一天。

我的angular指令中的.html（）无效

1 个答案: