How to fix $route.current is undefined in AngularJS

Question

I am new to AngularJS and currently I am getting an "TypeError: $route.current is undefined". Please see code below:

var sampleApp = angular.module('sampleApp', ['ngRoute']);

sampleApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/Angular/:topicId', {
        mytext: 'This is angular',
        controller: 'angularControllerParam',
        templateUrl: 'angularParam.html'
    });
}]);    

sampleApp.controller('angularControllerParam', function($scope, $routeParams, $route) {
    $scope.tutorialid = $routeParams.topicId;
    $scope.text = $route.current.mytext;
});

<body ng-app="sampleApp">
        <h1>Accessing parameters from the route</h1>
        <table class="table table-stripped" ng-controller="angularControllerParam">
            <thead>
                <tr>
                    <th> # </th>
                    <th> Angular JS topic </th>
                    <th> Description </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> 1 </td>
                    <td> 1 </td>
                    <td> Controllers </td>
                    <td> <a href="#!Angular/1"> Topic details </a> </td>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td> 2 </td>
                    <td> Models </td>
                    <td> <a href="#!Angular/2"> Topic details </a> </td>
                </tr>
                <tr>
                    <td> 3 </td>
                    <td> 3 </td>
                    <td> Directives </td>
                    <td> <a href="#!Angular/3"> Topic details </a> </td>
                </tr>
            </tbody>
        </table>
        <div ng-view></div>
    </body>

And below is the angularParam.html where when the user clicked "Topic details" it will show angularParam.html

<!-- angularParam.html -->

<h2>Angular</h2>
<div>{{ text }}</div>
<div>{{ tutorialid }}</div>

What I am trying to achieve is to access the properties of the route which is to show "This is angular" text in my angularParam.html

Can someone help me on this? Thanks in advance.

can you create a plunkr . something like plnkr.co/edit/R4xBzD9jrcrQbvFjyYam?p=preview ??Also, whats angular-route version are you using ? — Shashank Vivek
– Shashank Vivek, Commented Jun 3, 2018 at 11:01

machinehead115 · Accepted Answer · 2018-06-03 21:23:03Z

0

So two things:

By having the same controller being applied to the table element it is not on a route and thus does not have a $route. So the ng-controller can be removed from there.
You need to access mytext by using $route.current.$$route.mytext instead.

Check out the plnk I created: https://plnkr.co/edit/2jmErSMSSK7lA9cZPQ3m?p=preview

answered Jun 3, 2018 at 21:23

machinehead115

1,65710 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to fix $route.current is undefined in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related