How to add permission-only dynamically?

[hashim-sohail]

This is my html code

<li ng-class="{active: collapseVar == menu.Id}" ng-repeat="menu in side_menu"
            permission-only="{{menu.permission}}" permission>
             <a style="color:#FFFFFF; background-color:#00BCD4" ng-click="check(menu.Id)"><i class="fa {{menu.icon}} fa-2x" style="margin-right:5px;"></i>{{menu.name}} <span
                        class="fa arrow"></span></a>

            <ul  class="nav nav-second-level" collapse="collapseVar!=menu.Id">
                    <li ui-sref-active="active" ng-repeat="sub_menu in menu.sub_views">
                        <a style="color:#FFFFFF; background-color:#59C8D7"  ui-sref="{{sub_menu.state}}">{{sub_menu.name}}</a>
                    </li>
                </ul>
            </li>

i need to populate permissions dynamically But i am getting this error

angular.js:14525 Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{menu.permission}}] starting at [{menu.permission}}]. http://errors.angularjs.org/1.6.4/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bmenu.permission%7D%7D&p4=%7Bmenu.permission%7D%7D at angular.js:66 at AST.throwError (angular.js:15090) at AST.object (angular.js:15079) at AST.primary (angular.js:14968) at AST.unary (angular.js:14956) at AST.multiplicative (angular.js:14943) at AST.additive (angular.js:14934) at AST.relational (angular.js:14925) at AST.equality (angular.js:14916) at AST.logicalAND (angular.js:14908)

Can you guide on adding dynamic permissions?

[joeljeske]

I believe it is evaluated against the scope already, so all you should have to do is: ... permission-only="menu.permission" permission>

[hashim-sohail]

It take menu.permission as a string not a variable.

[rtpaulino]

+1

[ramansykam]

Try this: ..... permission-only="'{{menu.permission}}'" permission>

[masterspambot]

☝️