ui-路由器 $stateProvider.state.controller 不工作

Question

SignupCtrl 控制器未绑定到注册视图。即使我按下提交按钮，它也不起作用。但是当我将 ng-controller=SignupCtrl 放在表单标签中时，它会起作用。只是想知道为什么 ui-路由器状态参数控制器不工作。

index.html

<html class="no-js" ng-app="mainApp" ng-controller="MainCtrl">
  <head> ....
  </head>
  <body class="home-page">
          <div ui-view="header"></div>
        <div ui-view="content"></div>
        <div ui-view="footer"></div>
...

signup.html

<div class="form-container col-md-5 col-sm-12 col-xs-12">
  <form class="signup-form">
    <div class="form-group email">
      <label class="sr-only" for="signup-email">Your email</label>
      <input id="signup-email" type="email" ng-model="user.email" class="form-control login-email" placeholder="Your email">
    </div>
    <!--//form-group-->
    <div class="form-group password">
      <label class="sr-only" for="signup-password">Your password</label>
      <input id="signup-password" type="password" ng-model="user.password" class="form-control login-password" placeholder="Password">
    </div>
    <!--//form-group-->
    <button type="submit" ng-click="createUser()" class="btn btn-block btn-cta-primary">Sign up</button>
    <p class="note">By signing up, you agree to our terms of services and privacy policy.</p>
    <p class="lead">Already have an account? <a class="login-link" id="login-link" ui-sref="login">Log in</a>
    </p>
  </form>
</div><!--//form-container-->

app.js

angular
  .module('mainApp', [
    'services.config',
    'mainApp.signup'
  ])
  .config(['$urlRouterProvider', function($urlRouterProvider){
    $urlRouterProvider.otherwise('/');

  }])

signup.js

'use strict';

/**
 * @ngdoc function
 * @name mainApp.signup
 * @description
 * # SignupCtrl
 */
 angular
 .module('mainApp.signup', [
  'ui.router',
  'angular-storage'
  ])
 .config(['$stateProvider', function($stateProvider){
  $stateProvider.state('signup',{
    url: '/signup',
    controller: 'SignupCtrl',
    views: {
      'header': {
        templateUrl: '/pages/templates/nav.html'
      },
      'content' : {
        templateUrl: '/pages/signup/signup.html'
      },
      'footer' : {
        templateUrl: '/pages/templates/footer.html'
      }
    }
  });
}])
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {

  $scope.user = {};

  $scope.createUser = function() {
    $http({
      url: 'http://localhost:3001/users',
      method: 'POST',
      data: $scope.user
    }).then(function(response) {
      store.set('jwt', response.data.id_token);
      $state.go('home');
    }, function(error) {
      alert(error.data);
    });
  }

});

Answer 1

您需要一个模板来绑定控制器。

在文档中 ui-router Controllers

Controllers

You can assign a controller to your template. Warning: The controller will not be instantiated if template is not defined.

Answer 2

有a working plunker个。首先，查看此问答：

在我们可以看到的地方，

controller does not belong to state. It belongs to view!

这应该是状态定义：

$stateProvider.state('signup',{
    url: '/signup',
    //controller: 'SignupCtrl',
    views: {
      'header': {
        templateUrl: 'pages/templates/nav.html'
      },
      'content' : {
        templateUrl: 'pages/signup/signup.html',
        controller: 'SignupCtrl',
      },
      'footer' : {
        templateUrl: 'pages/templates/footer.html'
      }
    }
});

检查一下here

ui-路由器 $stateProvider.state.controller 不工作

ui-router $stateProvider.state.controller don't work

angularjs

angular-ui-router

angular-ui

ng-controller