CODEWITHSUNDEEP
angularjskendo-ui
julius_am
julius_am

Reputation: 1527

Using template in angular directive works but templateUrl doesn't work

I have the following example.

  1. In the example I'm using kendo menu with angular directive for kendo. Each item in the menu is my custom directive. When I use template inside the directive is works fine but when I use templateUrl it doesn't work, any ideas?

  2. The reason I am using a custom directive for the menu is because I couldn't find out how to register click of a specific item in the menu. There is an event in kendo menu (select) that I can use to register all menu item selections but then in the callback function I don't know which item was selected because there is no id on the DOM element and I also don't get the model data so there is no indication of what was clicked. How can I know that the "Open" menu was clicked for example?

Upvotes: 1

Views: 1867

Answers (1)

michael
michael

Reputation: 16351

1) The directive kendo-menu bootstraps the kendo menu from it's content. If you are using a template all is fine because the sub html structure is created before kendo bootstraps the menu. If you are using a templateUrl the template gets loaded and if the data arrive angular updates the dom in your directive. But at this time the kendo-menu directive is ready with bootstrapping the menu, so it will not be aware of any changes angular made on the dom. How to solve this: as you did - only use inline templates or put the templates to the templateCache before you used the template. But this requires a lot of changes to your code.

2) I am not quite sure where your problem is. But you may register a ng-click function like this:

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

in your controller you have access to the selected item:

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

here is the working PLUNKR

If you populate the menu from a dataSource you can specifiy a select function in your menuData:

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

e.item.textContent is the value that you have provided in your dataSource as text.

Upvotes: 1

Related Questions