Problem with ng-click + menu AngularJS

5

I have a menu that is populated dynamically:

<div ng-controller="menuDinamicoController as vm">
  <div ng-show="isAutenticado">
    <img src="{{vm.fotoUser}}" id="imagemUsuario" width="50px" />
    <label id="nomeUsuario" ng-model="nomeUser">{{vm.nomeUser}}</label>
    <div id="menu">
        <ul>
            <li ng-repeat="x in menu">
                <a href="{{x.Link}}" ng-click="vm.{{x.Id}}()">{{x.Nome}}</a>
            </li>
        </ul>
    </div>
  </div>
</div>

The link structure is being returned correctly:

<a href="#" ng-click="vm.sair()" class="ng-binding">Sair</a>

In my controller I have the following function:

vm.sair = function () {
        $cookieStore.remove("Usuario");
        $cookieStore.remove("Token");
        $location.path("/");
};

However, ng-click is not calling the function. And the following error occurs: Syntax Error: Token 'x.Id' is at column {2} of the expression [{3}] starting at [{4}].

    
asked by anonymous 04.11.2014 / 15:05

1 answer

1

One way that can work is as follows:

<li ng-repeat="x in menu">
    <a href="{{x.Link}}" ng-click="vm.runFunction(x.Id)">{{x.Nome}}</a>
</li>

In your controller (example in coffee script, you can convert to javascript if you want):

runFunction: (id)->
    if 'sair' == id
      @sair()

I do not know if it is very gambiarra to do this but I used it in a specific case here and it worked fine.

Take a look at this link as well. If you use this logic in ng-repeat instead of select, I believe it works as well.

    
04.11.2014 / 18:03