Question

在示例中，我使用带有角度指令的剑道菜单。菜单中的每个项目都是我的自定义指令。当我使用模板里面的指令工作正常，但当我使用templateUrl它不起作用，任何想法？
我为菜单使用自定义指令的原因是因为我无法找到如何在菜单中注册特定项目的点击。在kendo菜单（select）中有一个事件我可以用来注册所有菜单项选择但是然后在回调函数中我不知道选择了哪个项目，因为DOM元素上没有id而我也没有获取模型数据，因此没有指示点击的内容。如何知道单击“打开”菜单？

Answer 1

1）指令kendo-menu从其内容引导剑道菜单。如果你使用template一切都很好，因为在kendo引导菜单之前创建了子html结构。如果您使用的是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中提供的值。

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

1 个答案: