ui-router stateProvider.state美元。控制器不工作

The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working.

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

index.html

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);
    });
  }

});

2 个解决方案

#1

There is a working plunker. Firstly, check this Q & A:

有一个工作的活塞。首先，检查这个Q & A:

Are there different ways of declaring the controller associated with an Angular UI Router state

是否有不同的方法来声明与角UI路由器状态相关的控制器?

Where we can see, that

我们能看到什么?

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

控制器不属于状态。它属于视图!

This should be the state definition:

这应该是状态定义:

$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'
      }
    }
});

Check it here

检查在这里

#2

You need a template to bind a controller.

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

In the docs ui-router Controllers

在文档ui-router控制器中。

Controllers

控制器

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

您可以将一个控制器分配给您的模板。警告:如果没有定义模板，控制器将不会被实例化。

#1