How to force a view to load model values prior to loading controller in AngularJS?

Question

I am trying to auto post a form from a controller without any user interaction on the form. I have a private init() function in the controller that triggers a button click on the form. But the hidden form fields did not get the values yet. How can I make sure the hidden fields will have values populated before the form submits?

Thank you for any suggestions.

<div>
 <form name="myForm" method="post" action="@Model.Settings["URL"]" ng-controller="MyCtrl">

        <input type="hidden" name="userid" value="{{UserSettings.Settings.UserId}}">
        <input type="hidden" name="amount" value="{{Payment.Amount}}">


        <button id="payButton" type="submit" class="action blue"><span class="label">Pay</span></button>

        <script language="javascript">
            var UserSettings = (function (o) {
                return o;
            })(@Html.Raw(JsonConvert.SerializeObject(@Model)));
        </script>
    </form>
</div>

 myControllers.controller('MyCtrl', ['$scope', '$state', '$element', 'dataService', 
  function ($scope, $state, $element, service) {

      $scope.Payment = service.GetPayment());
      $scope.UserSettings = UserSettings;

      function init() {

        // How can I force to have values in the hidden form fields before the button click that submits the form ?

          $element.find('#payButton').trigger("click");
      };

      init();
  }]);

Here is the ui-router states configuration.

var app = angular.module('pay', ['ui.router', 'pay.controllers', 'pay.services', 'exceptionOverride', 'ngSanitize']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
        .state('home', {
            url: '/' ,
            templateUrl: 'search'
        })
        .state('payment', {
            url: '/payment',
            templateUrl: 'Payment'
        });

    //setting html5 removes the # from URL but causes routing problems at the moment.
    //$locationProvider.html5Mode(true);

    $urlRouterProvider.rule(function ($injector, $location) {
        //what this function returns will be set as the $location.url
        var path = $location.path(), normalized = path.toLowerCase();
        if (path != normalized) {
            $location.replace().path(normalized);
        }
        else if (path == '') {
            $location.path('/');
        }
    });
}]);

Maybe you should have $scope.Payment and $scope.UserSettings populated in state's resolve phase. Are you using Angular 1 or 2+? — lzagkaretos
– lzagkaretos, Commented Dec 7, 2017 at 16:21
Are you using ui-router for states? Can you post code for the state? — lzagkaretos
– lzagkaretos, Commented Dec 7, 2017 at 16:31
have you tried using $q service to load the data before proceding to click? — Panos K
– Panos K, Commented Dec 7, 2017 at 16:57
Yes, I am using ui-router. I will update my post with the code. — Jyina
– Jyina, Commented Dec 7, 2017 at 17:15

lzagkaretos · Accepted Answer · 2017-12-07 19:16:23Z

2

You can put the populations in the point you define the state which has MyCtrl as follows:

.state('myState', {
    // ...
    resolve: {
         Payment: ['dataService', function (dataService) {
             return dataService.GetPayment();
         }],
         // Same for other objects needed
    }
})

And then in your Controller:

myControllers.controller('MyCtrl', ['$scope', '$state', '$element', 'Payment',
  function ($scope, $state, $element, Payment) {

      $scope.Payment = Payment;
      // Same for other objects needed

      // Rest code         
}

The code in the Controller would not start running before all actions and promises in the resolve section finish.

Update:

You can put init call inside a $timeout.

$timeout(function(){
    init();
});

Of course, you have to inject $timeout in Controller function along with the other dependencies.

edited Dec 7, 2017 at 19:16

answered Dec 7, 2017 at 17:41

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jyina Over a year ago

Actually the controller got all the data needed before running init(). But the issue is that init() is triggering a button click to post the form in the view. But the view's model bindings are not there yet.

lzagkaretos Over a year ago

Updated my answer with $timeout suggestion.

Collectives™ on Stack Overflow

How to force a view to load model values prior to loading controller in AngularJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related