1

I am trying to create navigation links using the following array:

JS:

$scope.sidebarLinks = [
    {
        name: 'Dashboard',
        state: 'dashboard',

    },
    {
        name: 'Students',
        state: 'student.list'
    },
    {
        name: 'Organization',
        children: [
            {
                name: 'School Profile',
                state: 'schoolProfile.detail',
            },
        ],
    },
]

HTML:

<ul>
  <li ui-sref-active="active" ng-repeat="x in sidebarLinks">
    <a ui-sref="{{x.state}}"></a>
  </li>
</ul>

Since the state of 'Organization' is undefined, the ui-sref is empty for it. And so there is error saying:

Error: Invalid state ref ''

I have found some sort of hack in the following answer:

How to achieve that "ui-sref" be conditionally executed?

Is there some sort of (hack) way to solve the problem without creating new functions or controller for this??

Community
  • 1
  • 1
Barun
  • 4,245
  • 4
  • 23
  • 29

1 Answers1

0

If you do not wish additional functions, you can use ng-if to provide a link with ui-sref if state is set and one without if state is undefined.

Or you could default to another state if state is not defined using {{x.state || myOtherState }}

As you have children on your organisation, I guess the ng-if variant would suit you best, if you wish to display the children as well as this would need additional HTML.

PerfectPixel
  • 1,918
  • 1
  • 17
  • 18
  • what if there is no `myOtherState` i.e. just discard `ui-sref` if no `state` is available? – Barun Aug 26 '16 at 11:28
  • Then this solution would not work and you have to use ng-if. ui-sref requires a non-empty string. Conditionally adding ui-sref would require an additional directive. I am not aware of any other solution despite encountering the same problem multiple times in the past – PerfectPixel Aug 26 '16 at 12:05