javascript - Angularjs ui-router抽象状态不调用 Controller

标签 javascript angularjs angular-ui-router

我是 UI-Router 的新手,正在努力调用我的 Controller 。我使用抽象状态作为父级,它似乎没有调用 Controller 。下面是我的代码的简化版本。

我将 $stateChangeError 绑定(bind)到控制台,但在控制台上没有收到错误。我将 onEnter 和 OnExit 属性添加到我的状态,并且只有 onEnter 函数被调用(不包括在下面)。

index.html

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');    </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x"  src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15">   </script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js" ></script>
 <script src="app.js"></script>
</head>

<body>

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

   <div class="container">
     <div ui-view="content" ></div>
   </div>

   <p>We are on the homepage.</p>

</body>
</html>

App.js

var app = angular.module('plunker', ['ui-router']);

app.config(function ($stateProvider, $urlRouteProvider) {
  $urlRouteProvider.otherwise("/");

  $stateProvider.state('site', {
    abstract: true,
    views: {
      'navbar@': {
        template: '<p>This is the {{nav}}</p>',
        controller: 'NavBarCtrl'
      }
    }
  });
});
app.config(function($stateProvider) {
  $stateProvider
    .state('home', {
      parent: 'site',
      url: '/',
      views: {
        'content@': {
          template: '<p>This is the {{content}}</p>',
          controller: 'MainCtrl'
        }
      }
    });
});      
app.controller('NavBarCtrl', function($scope) {
  $scope.nav = 'Navbar'
});    
app.controller('MainCtrl', function($scope) {
  $scope.content = 'content'
});

最佳答案

a working example

有两个问题。首先我们必须引用正确的模块:

// instead of this
// var app = angular.module('plunker', ['ui-router']);
// we need this
var app = angular.module('plunker', ['ui.router']);

而且我们必须使用 '$urlRouterProvider'

的专有名称
// instead of this
app.config(function ($stateProvider, $urlRouteProvider) {
  $urlRouteProvider.otherwise("/");

// we need this
app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");

查一下working here

关于javascript - Angularjs ui-router抽象状态不调用 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30298313/

相关文章:

javascript - Angular 2 使用 router.navigate 重定向

javascript - 基于使用 ng-bind-html 添加的字段禁用提交按钮

javascript - webpack - imports-loader 和 ProvidePlugin : similar but not the same?

javascript - 在Underscore/Ramda/函数式语言/库中组合多个filter()谓词

javascript - 使用属性名称在 javascript 中查找对象的索引

javascript - 如何在隔离范围内创建嵌套对象

javascript - 使用javascript重定向到当前域之外

javascript - 无法显示对象内容 - AngularJS

javascript - ui-router 解析在第一次加载时显示先前的解析结果,有时在重新加载时根本不显示

angularjs - 使用ui-router将父状态默认为子状态