CODEWITHSUNDEEP
angularjsangular-ui-router
AC3
AC3

Reputation: 355

Angular UI router error Could not resolve 'child.state' from 'parent'

I'm having the above error in angular ui router when trying to load a state. I'm trying to have vertical tabs which, when clicked, give details right next to the tabs. I'm using resolve to get the details by id from my service. Below is my routing config

        .state('franchise', {
            url: "/franchise",
            controller: "FranchiseCtrl",
            templateUrl: "tpl/franchise.html"
        })
        .state('franchise.detail', {
            params: {
                franchiseId : "defaultId", 
                franchiseName: "defaultName"
            },
            url: "/:franchiseName",
            controller: function($scope, fran) {
                $scope.franchiseDetail = fran;
            },
            templateUrl: "partials/franchise-detail.html",
            resolve: {
                fran:  function($http, $stateParams) {
                    var url = "path/to/my/service" + $stateParams.franchiseId;
                    return $http.get(url)
                        .then(function(res){ return res.data; });
                }
            }
        })

This is my parent's template

<ul>
   <li ng-repeat="franchise in franchises">
      <a ui-sref="frachise.detail({ franchiseId: franchise.id,
                                    franchiseName: franchise.name })">
         Franchise {{ franchise.name }}
      </a>
   </li>
</ul>

I already tried putting my resolve in the parent but it kept giving the same error.

Upvotes: 0

Views: 1011

Answers (1)

Omri Aharon
Omri Aharon

Reputation: 17064

You have a typo in the word franchise (you missed the 'n'), should be:

<a ui-sref="franchise.detail({ franchiseId: franchise.id, franchiseName: franchise.name })">
      Franchise {{ franchise.name }}
</a>

Upvotes: 3

Related Questions