angularjs指令 - transclude不按預期工作

我正在寫一個子菜單指令，但由於某種原因，我無法正確使用transclude。我已閱讀並觀看了一些視頻，但它仍然不適用於我的應用，我無法弄清楚原因。angularjs指令 - transclude不按預期工作

這是我如何調用指令：

<my-submenu> 
    <div ng-click="test()">Test</div> 
    <div ng-click="test2()">Test 2</div> 
    <div ng-click="test3(id, type)">Test 3</div> 
    <div ui-sref="test ({id: id})">Test 4</div> 
</my-submenu>

和指令JS是：

{ 
    link: linkFunction, 
    restrict: 'E', 
    replace: true, 
    transclude: true, 
    templateUrl: './directives/submenu.tpl.html' 
    }

和指令的模板是：

<div> 
    <!-- Menu Icon --> 
    <div class="icon ion-plus"></div> 
    <!-- Menu --> 
    <div> 
     <div ng-transclude></div> 
    </div> 
</div>

現在，我雖然是使用transclude並告訴指令模板在哪裏進行transclude，我應該能夠向指令t添加內容emplate以及我從父母那裏打電話給我的內容，並將它編譯成代碼，但它不是那樣做的。

產生的編譯後的代碼如下：

<my-submenu> 
<div> 
    <div ng-click="test()">Test</li> 
    <div ng-click="test2()">Test 2</li> 
    <div ng-click="test3(id, type)">Test 3</li> 
    <div ui-sref="test ({id: id})">Test 4</li> 
</ul> 
</my-submenu>

，正如你所看到的，transclude前的圖標不見了，根本不顯示。爲什麼？

我在做什麼錯與transclude？感謝

來源

2016-06-09 Nick

你嘗試替換爲：假的？ – Sparw

是的，我有同樣的結果 – Nick

你正在使用transclude，其他的一定是造成這種情況。 –

我做這個用同樣的方式爲您和它工作正常..

我的指令：

myApp.directive('toolbarItem', function() { 
return { 
    transclude:true, 
    restrict: 'E', 
    scope: {}, 
    link: function(scope, element, attrs) { 
    }, 
    templateUrl:'/toolbarItem.html' 
}

}）;

而且我的模板：

<div class="item" ng-transclude></div>

來源

2016-06-09 09:53:42 Sparw

angularjs指令 - transclude不按預期工作

回答

相關問題