ui.router changing state, but ui-view doesn't display anything?

Question

Though the states are changing successfully, I can't get the ui-view to update:

HTML

<a ui-sref="promo.foo">Foo state</a>
<a ui-sref="promo.bar">Bar state</a>

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

JavaScript

$urlRouterProvider.otherwise("/");

$stateProvider
    .state('promo', {
               url: "/",
               abstract: true
           })
    .state('promo.foo', {
               url: "promo/foo",
               template: "'<h3>Foo</h3>'",
               controller: function($scope) {
                   $scope.value = 'foo';
               }
           })
    .state('promo.bar', {
               url: "promo/bar",
               template: "'<h3>Bar</h3>'",
               controller: function($scope) {
                   $scope.value = 'bar';
               }
           })

Plnkr (with bootstrap styling)

I have also tried setting ui-view to equal specific states also; and to dynamically change its RHS from my $scope .

Answer 1

Since you're trying to create nested views, the home state should have a template with an ui-view-element in it. Also you have both double and single quotes in the template

template: "'<h3>Foo</h3>'"

Is this Plunker what you had in mind?

Answer 2

给您的抽象状态一个模板，其中包含您的子状态将在其中呈现的模板...例如http://scotch.io/tutorials/javascript/angular-routing-using-ui-router