CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router
Mihir Patel
Mihir Patel

Reputation: 2372

Angular UI-Router not showing html content, but directing to the right path. No errors, but ui-view not working

I am using UI-Router for an Angular app. I can't seem to find what I am doing wrong. I am also not getting any errors which is making it really difficult for me to debug. Followed the docs as well and I am following their steps. My controller function is working when I don't nest it in a child view. Can someone please direct me to what I am doing wrong? Thanks in advance!

APP.JS

'use strict';

var app = angular.module('americasTopStatesApp', ['ui.router', 'ngAutocomplete']);

app.run(function($state, $rootScope) {
    $rootScope.$state = $state;
});

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider
    .otherwise('/home');

    $stateProvider
    //HOME
    .state('home', {
        url: '/home',
        templateUrl: './app/views/homeTmpl.html',
        controller: 'homeCtrl'
    })
    //RANKINGS
    .state("rankings", {
        url: "/rankings",
        templateUrl: './app/views/rankingsTmpl.html',
        controller: 'rankingsCtrl'
    })  
        // RANKINGS CHILDREN
        .state('rankings.data', {
            url: '/data',
            templateUrl: './app/views/rankingsDataTmpl.html',
            controller: 'rankingsCtrl',
            parent: 'rankings'
        })
});

CONTROLLER rankingsCtrl

'use strict';

app.controller('rankingsCtrl', function($scope, rankingsService) { //Start Controller

    // ***********************************************
    // *************** GET LATEST DATA ***************
    // ***********************************************  
    $scope.getAllStateRankings = function() {
        rankingsService.getStateRankingsData().then(function(data) {
            $scope.showRankings = true;

            // console.log("Contoller Data", data);
            $scope.states = data;
        });
    };
    $scope.showRankings = false;
    $scope.getAllStateRankings();

}); //End Controller

PARENT VIEW rankingsTmpl.html

<div class="rankings-heading">
    <h1>America's Top States</h1>
    <button ng-click="getAllStateRankings()">
        <a ui-sref="rankings.data" id="data" class="btn">Data</a>
    </button>
</div>

</div ui-view></div>

Child View (Nested ui-view) rankingsDataTmpl.html

<div class="rankings-container" ng-show="showRankings">

    <div class="panel panel-primary" ng-repeat='state in states'>
        <div class="panel-heading">
            <h3 class="panel-title">{{state.state}}</h3>
        </div>
        <div class="panel-body">
            Economy: {{state.economy}}<br>
            Capital Access: {{state.accessToCapital}}<br>
            Business: {{state.business}}<br>
            Cost of living: {{state.costOfLiving}}<br>
        </div>
    </div>
</div>

Screen Shot

enter image description here

Upvotes: 0

Views: 1084

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

There is a working plunker

In this case, when we have parent child and angular's UI-Router, we should not use solution based on

parent and child has same controller. // WRONG approach

Because they in fact do have JUST same type. The instance of that type 'rankingsCtrl' in runtime is different.

What we need is:

How do I share $scope data between states in angularjs ui-router?

scope inheritance, driven by reference object, e.g. $scope.Model = {}

There is adjusted controller:

.controller('rankingsCtrl', ['$scope', function($scope) {

    $scope.Model = {};
    $scope.getAllStateRankings = function() {
      //rankingsService.getStateRankingsData().then(function(data) {
        $scope.Model.showRankings = true;

        // console.log("Contoller Data", data);
        $scope.Model.states = data;
      //});
    };
    $scope.Model.showRankings = false;
    $scope.getAllStateRankings();

}])

At the end, child can have different controller with its own logic for the child view:

.state("rankings", {
  url: "/rankings",
  templateUrl: 'app/views/rankingsTmpl.html',
  controller: 'rankingsCtrl'
})
// RANKINGS CHILDREN
.state('rankings.data', {
  url: '/data',
  templateUrl: 'app/views/rankingsDataTmpl.html',
  controller: 'rankingsChildCtrl',
  parent: 'rankings'
})

Also, the parent view should have fixed div:

// wrong
</div ui-view></div>
// starting tag
<div ui-view></div>

Check it here in action

Upvotes: 1

Related Questions