angularjs 指令 - 嵌入非预期工作

Question

我正在编写一个子菜单指令，但由于某种原因我无法正确使用嵌入。我已经阅读并观看了一些视频，但它仍然无法在我的应用程序上运行，我也不知道为什么。

我是这样调用指令的：

<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，但我应该能够将内容添加到指令模板以及我从父级调用的内容，并将其编译在一起，但它并没有这样做。

编译后的代码如下：

<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>

如您所见，嵌入前的图标消失了，根本不显示。为什么？

我在嵌入中做错了什么？谢谢

Answer 1

我用和你一样的方法做的，它工作正常..

我的指令：

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

});

还有我的模板：

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

angularjs 指令 - 嵌入非预期工作

angularjs directive - transclude non working as expected

angularjs

angular-directive