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不按预期工作

回答

相关问题