ui-sref stops zf-open from working

[Joe-5mith]

I have a block list of links. When a link is clicked, a panel opens up and displays some content. Each link therefore contains the zf-open attribute.

Each link also changes the state and therefore contains the ui-sref attribute. However, with this ui-sref included, the panel does not open when a link is clicked. In order for the panel to open, the link must be clicked twice.

The following code exhibits this behavior:

<div class="grid-content">
    <div class="block-list">
        <ul>
            <li><a zf-open="detail-panel" ui-sref="vehicles({vehicleType:'cars'})">Cars</a></li>
            <li> <a zf-open="detail-panel" ui-sref="vehicles({vehicleType:'bikes'})">Bikes</a></li>
        </ul>
    </div>
</div>
<div zf-panel id="detail-panel" position="right">
    <h5><a href="#" zf-close="detail-panel">x</a></h5>

    <div ng-if="$state.params.vehicleType=='cars'">
        <h3>Cars</h3>
    </div>

    <div ng-if="$state.params.vehicleType=='bikes'">
        <h3>Bikes</h3>
    </div>

</div>

[gakimball]

Do you want the panel to be open as long as the vehicles state is active? Maybe you could drop the zf-open and use ui-router's state events to open/close the panel. The ui-router wiki goes into more detail, but here's a (possible) code example:

$stateProvider.state("items.add", {
  url: "/add",
  onEnter: ['$stateParams', '$state', 'foundationApi', function($stateParams, $state, FoundationApi) {
    foundationApi.publish('#detail-panel', 'show');
  }],
  onExit: ['$stateParams', '$state', 'foundationApi', function($stateParams, $state, FoundationApi) {
    foundationApi.publish('#detail-panel', 'hide');
  }]
});

[Joe-5mith]

No, I don't want the panel to be open as long as the vehicles state is active. Hopefully, the following explanation of what is not working for me will be clearer.

The state is defined like this:

$stateProvider.state('vehicles', {
    url: '/vehicles/{vehicleType}',
    templateUrl: 'templates/dev/vehicles.html'
});

When I go to http://localhost:8080/#!/vehicles/cars I see the block list:

<div class="grid-content">
    <div class="block-list">
        <ul>
            <li><a zf-open="detail-panel" ui-sref="vehicles({vehicleType:'cars'})">Cars</a></li>
            <li> <a zf-open="detail-panel" ui-sref="vehicles({vehicleType:'bikes'})">Bikes</a></li>
        </ul>
    </div>
</div>

This is what I want to see.

Then, when I click on the <a zf-open="detail-panel" ui-sref="vehicles({vehicleType:'bikes'})">Bikes</a> link, I want the panel to open up and show the word <h3>Bikes</h3>.

However, ui-sref="vehicles({vehicleType:'bikes'})" appears to conflict with zf-open="detail-panel" and the panel does not open until the <a zf-open="detail-panel" ui-sref="vehicles({vehicleType:'bikes'})">Bikes</a> link is clicked twice.