CODEWITHSUNDEEP
angularjsangular-ui-router
tg4
tg4

Reputation: 31

Angular ui-router ui-sref redirects back to calling page, even though destination page renders correctly

I'm a newb and have to be doing something stupid here, and I can't figure it out for the life of me. Thanks in advance for any help!

In short, I have 3 pages that all load correctly when visiting them directly through the address bar in a browser:

#/communities
#/companies
#/companies/:id

I have used ui-router to define the company states as follows:

//companies.js file:
.config(function config( $stateProvider ) {
$stateProvider
    .state( 'companies', {
        url: '/companies',
        views: {
            "main": {
                templateUrl: 'companies/companies.tpl.html'
        }
    },
data:{ pageTitle: '' }
  });
})

//companies.detail.js file:
.config(function config( $stateProvider ) {
$stateProvider
    .state( 'companies.detail', {
        url: '/:id',
        views: {
            //use @ to force use of parent ui-view tag
            "main@": {
                templateUrl: 'companies/companies.detail/companies.detail.tpl.html'
        }
    },
data:{ pageTitle: '' }
  });
})

.controller('CompanyDetailCtrl', ['CompaniesService', '$stateParams',
    function(CompaniesService, $stateParams) {

    alert($stateParams.id); //this fires when I navigate to page briefly

    var _this = this; //need to get better approach for this (ideally remove)
    _this.hoas = [];

    CompaniesService.getCompanyHoas($stateParams.id).then(function(response) {
        _this.hoas = response;
    });

}])
;

//communities.tpl.html calling page snippet:
<a ui-sref="companies.detail({id:hoa.company.id})">{{hoa.company.name}}</a>

The URL is created correctly when I hover over in a browser (ie: "companies/223") AND the companies/223 page is correctly navigated to BUT only for a split second and then redirects back to the calling page. The page IS caught in browser history (so I can go back to it and stay on it and it works perfectly), but when I click this link it always redirects back.

What am I missing??? It's killing me. Thanks for your help. :)

Upvotes: 0

Views: 1781

Answers (1)

tg4
tg4

Reputation: 31

The reason the state was always redirecting back to the calling page is because I had teh ui-sref wrapped in a parent ui-sref element that was pointing back to the calling page:

<a ui-sref="companies" class="list-group-item" 
ng-click="list.selectCommunity(community)" 
ng-switch on="list.isSelected(community)"
ng-class="{'active': list.isSelected(community)}" >
    <div ng-switch-when="true">
        <div class="table-responsive">
            <table class="table">
                ...
                    <td class="hidden-xs"><a ui-sref="companies.detail({id:hoa.company.id})">{{hoa.company.name}}</a></td>
                ...
            </table>
        </div>
    </div>
</a>

I easily corrected this by changing the first line to:

<a href="#" class="list-group-item" ...

Hope this helps someone in the future. I just wish I didn't assume the problem was within my JS!

Upvotes: 3

Related Questions