1

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

索引.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>
...

注册.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-->

应用程序.js

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

  }])

注册.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);
    });
  }

});
4

2 回答 2

2

一个工作的plunker。首先,检查此问答:

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

在我们可以看到的地方,

控制器属于state. 它属于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'
      }
    }
});

在这里检查

于 2015-05-03T16:44:18.187 回答
0

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

在文档中ui-router Controllers

控制器

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

于 2015-05-03T15:18:01.757 回答