在angular指令中使用模板有效，但templateUrl不起作用

Question

我有下面的例子 。

1. 在示例中，我将剑道菜单与kendo的angular指令一起使用。 菜单中的每个项目都是我的自定义指令。 当我在指令中使用模板时，效果很好，但是当我使用templateUrl时，它不起作用，有什么主意吗？

2. 我为菜单使用自定义指令的原因是因为我找不到如何在菜单中注册特定项目的单击。 kendo菜单（选择）中有一个事件，我可以使用该事件来注册所有菜单项选择，但是在回调函数中，我不知道选择了哪个项，因为DOM元素上没有id并且我也没有获取模型数据，因此不显示单击了什么指示。 我怎么知道例如单击“打开”菜单？

Answer 1

1）指令kendo-menu menu从内容中引导kendo菜单。 如果您使用的是template一切都很好，因为在kendo引导菜单之前创建了sub html结构。 如果您使用的是templateUrl ，则会加载templateUrl ，并且如果数据到达角度，则更新指令中的dom。 但是，此时kendo-menu指令已准备好引导菜单，因此它不会知道对dom所做的任何更改。 解决方案：与您一样-仅使用内联模板或在使用模板之前将模板放入templateCache。 但这需要对代码进行大量更改。

2）我不确定您的问题在哪里。 但是您可以注册一个ng-click函数，如下所示：

<ul kendo-menu>
    <li ng-repeat="item in menuData.dataSource">
        <label>{{item.text}}</label>
        <ul>
           <li ng-click="menuSelected(subitem)" ng-repeat="subitem in item.items/>
              <label>{{subitem.text}}</label>
           </li>
        </ul>
    </li>
</ul>

在您的控制器中，您可以访问所选项目：

$scope.menuSelected = function(selected){
   console.log(selected);
}

这是工作中的PLUNKR

如果从dataSource填充菜单，则可以在menuData中指定一个select函数：

$scope.menuData = {
    select: function(e) {
        console.log(e);
        console.log(e.item.textContent);
     },
    dataSource: [ ... ] };

e.item.textContent是您在dataSource提供的text 。