2014-01-21 43 views
1

我有following example在角度指令中使用模板但templateUrl不起作用

  1. 在这个例子中,我使用kendo菜单和kendo的angular指令。菜单中的每个项目都是我的自定义指令。当我使用模板里面的指令是工作正常,但是当我使用templateUrl它不起作用,有什么想法?

  2. 我为菜单使用自定义指令的原因是因为我找不到如何在菜单中注册特定项目的单击。在kendo菜单(select)中有一个事件可以用来注册所有的菜单项选择,但是在回调函数中我不知道哪个项目被选中,因为DOM元素上没有id,我也没有获取模型数据,因此没有迹象表明点击的内容。我怎么知道点击了“打开”菜单?

+0

即使使用模板,您的plunker链接也不会显示视图。 –

+0

这很奇怪......我确实看到它。这里是一个类似的例子,在js Bin中,但这里的模板url根本不起作用... http://jsbin.com/uDiLAQIn/45/edit –

回答

1

1)指令kendo-menu从其内容中引导kendo菜单。如果您使用的是template,则全部都可以,因为在kendo引导菜单之前创建了子html结构。如果您使用的是templateUrl,则模板将被加载,如果数据到达角度,则会更新指令中的dom。但此时kendo-menu指令已准备好引导菜单,所以它不会意识到在dom上产生的任何角度变化。如何解决这个问题:就像您一样 - 只能使用内联模板或在使用模板之前将模板放到templateCache中。但是这需要对代码进行很多更改。

2)我不太清楚你的问题在哪里。在您的控制器

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

你有机会选择的项目:不过你可以注册一个ng-click功能这样

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

这里工作PLUNKR

如果填充菜单中的数据源可以指定菜单中的选择功能数据:

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

e.item.textContent是您在dataSource中提供的值为text

+0

#2是我没有渲染内容,但使用“k-options”,在这种情况下,菜单呈现内容本身,所以我不能添加ng-click。 –

+0

你能改变你的plunkr吗?所以我可以检查这个? – michael

+0

我改变了它... –