angularjs指令 - 按预期转换非工作

时间:2016-06-09 09:45:17

标签: angularjs angular-directive

我正在编写子菜单指令,但由于某种原因我无法正确使用转码。我已经阅读并观看了一些视频,但它仍然无法在我的应用上运行,我无法弄清楚原因。

以下是我如何称呼该指令:

<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并告诉指令模板在哪里转换,我应该能够将内容添加到指令模板以及我调用的内容,如果来自我的父,并将其编译为togheter,但它不这样做。

生成的编译代码如下:

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

正如您所看到的,转换前的图标已消失,根本不显示。为什么呢?

我在转码时做错了什么?感谢

1 个答案:

答案 0 :(得分: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>