CODEWITHSUNDEEP
angularjsangular-ui-router
RajaN
RajaN

Reputation: 53

ui-sref not adding href to html rendered and there by not clickable

No errors in console.

My code is simple and as below Home.html <h2>Select the car for seeing details</h2> <div ui-view=""></div> angular.module('cardealer', ['ngRoute', 'ui.router']) .controller('carcntrlr', function ($scope, $route, $routeParams, $location) { $scope.cars = [{ id: 1, name: 'Honda' }, { id: 2, name: 'Hyundai' }, { id: 3, name: 'Toyota' }];

    })
    .controller('cardetails',function($scope,$routeParams){

        $scope.id = $routeParams.id;
        $scope.name = $routeParams.name;
    })
    .config(function ($stateProvider, $routeProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/route")
        $stateProvider.state('cars', {
            url: "/route",
            templateUrl:'cars.html',
            controller: 'carcntrlr'
        })
          .state("cardetails", {
            url: '/car/:carId/:carName',
            templateUrl:'cardetails.html',
                controller:function($scope,$stateParams){

                    $scope.id = $stateParams.carId;
                    $scope.name = $stateParams.carName;
                }

        })
    })
    ;

</script>

Cars.html

<div>


<ul ng-repeat="car in cars">
    <li>
        <a ui-sref="carDetails({carId: '{{car.id}}',carName:'{{car.name}}'})">{{car.name}}</a>
    </li>
</ul>
<hr/>
<div ui-view></div>

Upvotes: 1

Views: 1152

Answers (2)

selftaught91
selftaught91

Reputation: 7461

First thing is what @Pankaj Parkar has pointed out so you should write

ui-sref="carDetails({carId: car.id, carName: car.name})"

Then in the states that you have defined the state name as carDetails (Note capital D) but in your cars.html page you are calling state as cardetails(note small d)

same for the name of carDetails.html page

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

While providing values to ui-sref state parameters, no need to use {{}} & '(single qoute) as well. Like you are passing value from scope variable here.

And next thing is typo in state name carDetails should be cardetails

ui-sref="cardetails({carId: car.id, carName: car.name})"

Upvotes: 1

Related Questions