WorklightBeginner WorklightBeginner - 6 months ago 43
AngularJS Question

MobileFirst: How to pass parameters to adaptor using angularJS

I am using angularJS in Mobile first and i am getting error as parameter values are not recevied by adaptor

need to know how to pass parameters in

function(function($scope.userName, $scope.password)) & parameter(parameters : [$scope.userName, $scope.password])
variable using
$scope
or without
$scope


app.controller('loginController',function($scope){

$scope.login = function($scope.userName, $scope.password){
$scope.userNameTxt = angular.element('#usrName').val();
$scope.passwordTxt = angular.element('#pass').val();
console.log($scope.userName, $scope.password);
$scope.userName = $scope.userNameTxt;
$scope.password =$scope.passwordTxt;
$scope.loginProcedure = {
procedure : 'login',
adaptor : 'SQL',
parameters : [$scope.userName, $scope.password]
};

WL.Client.invokeProcedure($scope.loginProcedure,{
onSuccess : $scope.loginSuccess,
onFailure : $scope.loginFailure
});

$scope.loginSuccess = function(data)
{
$scope.data = data;
console.log($scope.data);
};

$scope.loginFailure = function()
{
console.log('failed');
};
}

});

Answer

Two-way binding

If you are using two-way binding in your controller as shown below

<div ng-controller="loginController">
  <form ng-submit="login()">
    <input type="text" ng-model="username" placeholder="Username" />
    <input type="password" ng-model="password" placeholder="Password" />

    <input class="btn-primary" type="submit" value="Login"  />
  </form>
</div>

then you can use the following:

app.controller('loginController',function($scope){

    $scope.login = function(){
        $scope.loginProcedure = {
                procedure : 'login',
                adapter : 'SQL',
                parameters : [$scope.username, $scope.password]
        };

        WL.Client.invokeProcedure($scope.loginProcedure,{
            onSuccess : $scope.loginSuccess,
            onFailure : $scope.loginFailure
        });

        $scope.loginSuccess = function(data)
        {
            $scope.data = data;
            console.log($scope.data);
        };

        $scope.loginFailure = function()
        {
            console.log('failed');
        };
    }
});

No binding:

If you are not using two-way binding for your form fields then you could try the following:

app.controller('loginController',function($scope){

    $scope.login = function(){
        var username = angular.element('#usrName').val();
        var password = angular.element('#pass').val();

        $scope.loginProcedure = {
                procedure : 'login',
                adapter : 'SQL',
                parameters : [username, password]
        };

        WL.Client.invokeProcedure($scope.loginProcedure,{
            onSuccess : $scope.loginSuccess,
            onFailure : $scope.loginFailure
        });

        $scope.loginSuccess = function(data)
        {
            $scope.data = data;
            console.log($scope.data);
        };

        $scope.loginFailure = function()
        {
            console.log('failed');
        };
    }

});