javascript - How Do You Bind A View After Form Submit In AngularJS ng-submit? - Stack Overflow

admin管理员组

文章数量:1391925

I have a simple question. How do you bind a view after form submit in AngularJS? My controller has this function to test if the submission works:

var spinnrApp = angular.module('spinnrApp', ['ngAnimate', 'ui.router', 'slick']);

spinnrApp.config(function ($stateProvider, $urlRouterProvider) {
  //
  // Now set up the states
  $stateProvider
    .state('registration', {
      url: "/registration",
      templateUrl: "app/ponents/registration/registration.php",
      controller: "FormController"
    })
    .state('registration.spinnrapp', { // nested state for the registration form
      url: "/spinnrapp", // url will be nested /registration/artist
      templateUrl: "app/ponents/registration/partials/registration-profile.php"
    })
    .state('registration.artist', { // nested state for the registration form
      url: "/artist", // url will be nested /registration/artist
      templateUrl: "app/ponents/registration/partials/registration-artist.php"
    })
    .state('registration.share', { // each nested state will have their own view
      url: "/share", // url will be nested /registration/share
      templateUrl: "app/ponents/registration/partials/registration-share.php"
    });
    //
    // For any unmatched url, redirect to /
    $urlRouterProvider.otherwise("/registration/spinnrapp");
});
spinnrApp.controller('FormController', ['$scope', '$http', function (scope, http){

  // get list of cities and store it to select
  http.get('cities.json').success(function(data){
    scope.cities = data;
  })

  // we will store all our form data in this object
  scope.formData = {};

  // function to process the form
  scope.processForm = function() {
    $state.go('registration.share');
  };
}]);

How do you change alert("awesome!"); to a ui-view after ng-submit passes through? I have a ui-view called registration-share.php.

UPDATE: I am calling the processForm in the submit button like this:

<div class="form-group row">
  <div class="col-xs-3 col-xs-offset-1">
    <button type="submit" class="submit btn">Next Section</button>
  </div>
</div>

where my formApp wrapper goes like this:

<form id="signup-form" ng-submit="processForm()">
  <!-- our nested state views will be injected here -->
  <div id="form-views" ui-view></div>
</form>

I have a simple question. How do you bind a view after form submit in AngularJS? My controller has this function to test if the submission works:

var spinnrApp = angular.module('spinnrApp', ['ngAnimate', 'ui.router', 'slick']);

spinnrApp.config(function ($stateProvider, $urlRouterProvider) {
  //
  // Now set up the states
  $stateProvider
    .state('registration', {
      url: "/registration",
      templateUrl: "app/ponents/registration/registration.php",
      controller: "FormController"
    })
    .state('registration.spinnrapp', { // nested state for the registration form
      url: "/spinnrapp", // url will be nested /registration/artist
      templateUrl: "app/ponents/registration/partials/registration-profile.php"
    })
    .state('registration.artist', { // nested state for the registration form
      url: "/artist", // url will be nested /registration/artist
      templateUrl: "app/ponents/registration/partials/registration-artist.php"
    })
    .state('registration.share', { // each nested state will have their own view
      url: "/share", // url will be nested /registration/share
      templateUrl: "app/ponents/registration/partials/registration-share.php"
    });
    //
    // For any unmatched url, redirect to /
    $urlRouterProvider.otherwise("/registration/spinnrapp");
});
spinnrApp.controller('FormController', ['$scope', '$http', function (scope, http){

  // get list of cities and store it to select
  http.get('cities.json').success(function(data){
    scope.cities = data;
  })

  // we will store all our form data in this object
  scope.formData = {};

  // function to process the form
  scope.processForm = function() {
    $state.go('registration.share');
  };
}]);

How do you change alert("awesome!"); to a ui-view after ng-submit passes through? I have a ui-view called registration-share.php.

UPDATE: I am calling the processForm in the submit button like this:

<div class="form-group row">
  <div class="col-xs-3 col-xs-offset-1">
    <button type="submit" class="submit btn">Next Section</button>
  </div>
</div>

where my formApp wrapper goes like this:

<form id="signup-form" ng-submit="processForm()">
  <!-- our nested state views will be injected here -->
  <div id="form-views" ui-view></div>
</form>

• javascript
• angularjs
• forms

Share Improve this question Follow edited Oct 30, 2014 at 3:45 ralphcarlo asked Oct 30, 2014 at 2:48 ralphcarloralphcarlo 20966 silver badges2222 bronze badges 5

• are you using an Angular router such as ng-route or ui-router? – Mike Commented Oct 30, 2014 at 2:55
• There is $state.go function that you can use. – Chandermani Commented Oct 30, 2014 at 3:13
• Are you trying to submit the form to registration-share.php? – Martin Commented Oct 30, 2014 at 3:59
• Martin, I'm trying to redirect the page to registration-share.php after submission succeeds. This is a static page. – ralphcarlo Commented Oct 30, 2014 at 4:05
• 1 You don't appear to be injecting $state into the controller. – Mike Commented Oct 30, 2014 at 13:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

As you're using ui-router, inject $state into the controller and use the following:

$state.go('newUiRouterStateYouWishToDisplay');

---

This doesn't apply at this point, as you clarified that you're using ui-router, but if you were using ngRoute, inject $location into the controller and use the follwing:

$location.path('/newNgRouteYouWishToDisplay');

本文标签： javascriptHow Do You Bind A View After Form Submit In AngularJS ngsubmitStack Overflow