[英].html() in my angular directive is not working
我正在將代碼轉換為角度代碼,並且需要有關創建指令的幫助。 我正在嘗試轉換以下內容
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。 第一個視圖是外殼,第二個視圖稱為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()缺少某些內容。 有人可以幫我解決這個問題嗎?
謝謝!
您在模板中引用$('.navigation')
,這是一個內部包含一些Angular代碼的HTML塊。 您的模板尚不能保證Angular會渲染該位,這就是為什么我們首先使用指令的原因。 這就是$('。navigation')為空的原因。 如果您嘗試將其從jQuery轉換,請停止使用jQuery。
指令具有link
功能,該功能在編譯后發生。 可以將link
函數想像為jQuery中的document.ready
,但是要用於特定的元素或指令。 當然,您正在嘗試引用完全不同的元素,因此您將不知道何時完成。 這就指出了一個更大的問題……為什么要嘗試將DOM從一種結構復制到另一種結構? 只需將該DOM放入模板中,然后將其命名為“ day”即可。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.