Question

我从使用ui-router的非常简单的角度应用程序中得到了非常奇怪的行为。正在加载和显示所有模板，但只调用了一个控制器，即DashboardCtrl。我根本无法解释这一点。

var adminPanel = angular.module('adminPanel', [
  'ui.router',
  'adminPanel.controllers'
])
.config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('dashboard', {
      url: '/dashboard',
      templateUrl: 'templates/dashboard.html',
      controller: 'DashboardCtrl'
    })
    .state('home', {
      url: '/home',
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    })
    .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'
    });
    $urlRouterProvider.otherwise('/login');

});

adminPanel.controllers = angular.module('adminPanel.controllers', [])
.controller('LoginCtrl', function ($scope, $state, AuthService) {

  console.log("hello!"); // never called
  $scope.user = {
    username: null,
    password: null
  };

  $scope.submitLogin = function(loginForm) { 
    // never called
  };

})
.controller('DashboardCtrl', ['$scope', function ($scope) {
  console.log("Dashboard"); // this one is called for unkown reason
}])
.controller('HomeCtrl', [ '$scope', '$http', function ($scope, $http) {
  console.log("HomeCtrl"); // never called
}]);

标记非常简单：

<html>
  <body ng-app="adminPanel">
    <div ui-view></div>
    <script src="js/vendor.js" type="text/javascript"/></script>
    <script src="js/app.js" type="text/javascript"/></script>
  </body>
</html>

模板：

dashboard.html

<h1>Dashboard</h1>

home.html的

<h1>Home</h1>

的login.html

<h1>Login</h1>
<form name="loginForm" class="login-form" ng-submit="submitLogin(loginForm)">
  <input type="text" name="username" ng-model="user.username"/>
  <input type="password" name="password" ng-model="user.password"/>
</form>

Answer 1

我认为将控制器连接到基本角度模块的方式存在问题，但我仍然无法确定。

Angular UI路由器加载视图，但不是控制器

1 个答案: