CODEWITHSUNDEEP
angularjsangularjs-routing
Neilski
Neilski

Reputation: 4415

Angular Links in view not working

I am just beginning to experiment with AngularJS and have come across a problem.

My main page renders a <ng-view> element and I have set up the following routes:

(function () {
   var routes = function ($routeProvider) {
      $routeProvider.
         when('/', {
            templateUrl: 'Home/Overview',
            controller: 'OverviewPageController'
         })
         .when('/Issue/:id', {
            templateUrl: 'Home/Issue'
         })
         .otherwise({ redirectTo: '/' });
   }

   routes.$inject = ['$routeProvider'];

   angular.module('PublicationSchedulerApp')
      .config(routes);

}());

If I add a link tag outside of the <ng-view>:

<a ng-href="#/Issue/123">Issue</a>

The 'Issue' page is loaded into the view as expected.

In my case however, the Overview controller loads some data via an asynchronous Ajax call and then renders a table with a custom directive which, in turn, uses <ng-repeat>. If I create the same link within this directive/table:

<tr ng-repeat="issue in issues">
   <td>
      <a ng-href="#/issue/{{ issue.issueId }}">{{ issue.subject }}</a>
   </td>
</tr>

The routing doesn't work. As you can see, I have played around with changing the link attribute from href to ng-href but this doesn't seem to make any difference. I am guessing that the asynchronous loading of the data is somehow breaking the routing, but I am not sure how to fix it. A couple of posts suggested that I reload the $route after the data load:

angular.module('PublicationSchedulerApp')
.run(['$route', function ($route) {
   $route.reload();
}]);

but this didn't appear to make any difference either.

Any help would be much appreciated - thanks.

Upvotes: 0

Views: 2666

Answers (1)

Thomas Roch
Thomas Roch

Reputation: 1216

In Angular, routes are case sensitive. So make sure that your links match your route.

<tr ng-repeat="issue in issues">
   <td>
      <a ng-href="#/Issue/{{ issue.issueId }}">{{ issue.subject }}</a>
   </td>
</tr>

You can also use ui-router, that way you will be able to create your links with state names rather than URLs (easier to maintain and less error-prone).

Upvotes: 1

Related Questions