Angularjs ui-view not updating

Question

I've pretty much used the top solution from UI-Router multiple named views not working with my angular app, but my ui-view does not seem to be updating, but rather just disappearing altogether. There must be some really small detail I'm missing that I've been stuck on for a long time...

I have an index.html page, with a [div ui-view=""] that is replaced on the home state. This ui-view (frontpage.html) has another [div ui-view="search-result"] which I'm hoping gets updated (change text to "successful template replacement") from a state change, but when the state changes, the entire [div ui-view=""] from index.html disappears instead when the search button is clicked.

All relevant script tags are included in my index.html.

index.html:

<body ng-app="...">
<div class="container">
    <div ui-view=""></div>
</div>

app.js:

angular.module('...', [ 'ui.router','ui.bootstrap']).
config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
    .state('main', {
      url: "/",
      templateUrl: "/app/states/frontpage/frontpage.html"
    })
    .state('search', {
        url : "/search/:query",
        views: {
            'search-result@search': {
                template: 'successful template replacement'
            }
        }
    }).run(function(){});

frontpage.html:

<div class="row" ng-controller="MainController">
    some stuff here

    <div class="col-xs-9">
        <input type="text" class="inline" ng-model="searchText" placeholder="Search..."></input>

        <button class="btn btn-default inline" type="button" ng-click="search()">Search</button>

        <div ui-view="search-result"></div>
    </div>
</div>

mainCtrl.js

angular.module('...')
.controller('MainController', ['$scope','$state', function($scope,$state) {
    $scope.searchText;

$scope.search = function(){

    console.log('going to state search with searchText: ' + $scope.searchText);
    $state.go('search',{query:$scope.searchText});
}

}]);

Radim Köhler Radim Köhler · Accepted Answer · 2016-10-18T18:36:36

In case that 'search' state should go to template of the 'main' ... it must be its child (check the parent: 'main')

.state('main', {
    url: "/",
    templateUrl: "/app/states/frontpage/frontpage.html"
})
.state('search', {
    parent: 'main', // parent is main, named view will find its target
    url : "/search/:query",
    views: {
        'search-result@search': {
            template: 'successful template replacement'
        }
    }
}

Angularjs ui-view not updating

1 Answers