需要單擊兩次提交按鈕以調用IBM Mobile First中的onSuccess Adapter函數

Question

我在IBM MobileFirst Platform Foundation應用程序中使用AngularJS。 我有一個登錄表單，當我單擊“ 登錄”按鈕時，它會收集一些數據並將其傳遞給適配器調用功能。 如果成功，則永遠不會調用成功的loginSuccess函數。 我需要單擊兩次登錄按鈕，以便調用成功函數。

為什么需要兩次單擊按鈕？

app.js

var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/login');
    $stateProvider.state('login', {
        url: '/login',
        templateUrl: 'view/login.html',
        controller: 'loginController'
    });
});

login.js

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

    $scope.login = function(usrName, pass) {

        var usrName = angular.element('#usrName').val();

        var pass = angular.element('#pass').val();
        console.log("Variable values: " + usrName + " : " + pass);
        $scope.loginProcedure = {
            adapter: 'SQL',
            procedure: 'login',
            parameters: [usrName, pass]
        };

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

        $scope.loginSuccess = function(data) {
            $scope.data = data;
            $scope.resultSet = data.resultSet;
            console.log('success: ' + JSON.stringify($scope.data + " : " + $scope.resultSet));
        };

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

SQL-impl.js

/*
 *  Licensed Materials - Property of IBM
 *  5725-I43 (C) Copyright IBM Corp. 2011, 2013. All Rights Reserved.
 *  US Government Users Restricted Rights - Use, duplication or
 *  disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
/************************************************************************
 * Implementation code for procedure - 'procedure1'
 *
 *
 * @return - invocationResult
 */
var loginStatement = WL.Server.createSQLStatement("select usrname,password from jay1 where usrname = ? and password=? ");

function login(usr, pass) {
    return WL.Server.invokeSQLStatement({
        preparedStatement: loginStatement,
        parameters: [usr, pass]
    });
}

/************************************************************************
 * Implementation code for procedure - 'procedure2'
 *
 *
 * @return - invocationResult
 */

function procedure2(param) {
    return WL.Server.invokeSQLStoredProcedure({
        procedure: "storedProcedure2",
        parameters: [param]
    });
}

index.html

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>AB</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!--
                    <link rel="shortcut icon" href="images/favicon.png">
                    <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
                -->
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css" />

    <script>
        window.$ = window.jQuery = WLJQ;
    </script>
</head>

<body ng-app="myApp">
    <!--application UI goes here-->

    <div id="view" ui-view></div>

    <script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
    <script src="library/jquery.min.js"></script>
    <script src="library/angular.1.4.9.js"></script>
    <script src="library/angular-ui-router.min.js"></script>
    <script src="library/bootstrap.min.js"></script>
    <script src="controller/app.js"></script>
    <script src="controller/login.js"></script>
</body>

</html>

login.html

<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">

    <!-- Login Box Start -->

    <div class="panel panel-primary">
        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <form class="form-group" name="lgForm">
                <input type="text" class="form-control" id="usrName" required />
                <input type="password" class="form-control" id="pass" required />
                <input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
            </form>
        </div>
    </div>

    <!-- Login Box End -->

    <!--  error Modal start -->

    <div class="modal" role="modal" id="errorPopup">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">Error</div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>

    <!--  error Modal End -->

</div>

哪種是使用angularJS $scope解析JSON數據的正確方法？

1） $scope.data = data; $scope.resultSet = data.resultSet; $scope.data = data; $scope.resultSet = data.resultSet;

2） $scope.data = data; $scope.resultSet = $scope.data.resultSet; $scope.data = data; $scope.resultSet = $scope.data.resultSet;

Answer 1

您應該利用AngularJS雙向綁定來更新登錄控制器，如下所示：

login.js

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

    $scope.login = function() {

        // TODO: if block to validate user input i.e., username and password

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

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

        console.log($scope.loginProcedure);

        $scope.loginSuccess = function(data) {
            $scope.data = data;
            // resultSet is part of data so you don't need to refrences
            // you can use $scope.data.resultSet to access resultSet
            console.log('success: ' + JSON.stringify($scope.data + " : " + $scope.data.resultSet));
        };

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

您還應該更新視圖以聲明username和password的綁定

login.html

<div ng-controller="loginController" class="col-xs-12 col-sm-6 col-md-4 center-block" id="lgBlock">

    <!-- Login Box Start -->

    <div class="panel panel-primary">
        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <form class="form-group" name="lgForm">
                <input type="text" class="form-control" id="usrName" ng-model="username" required />
                <input type="password" class="form-control" id="pass" ng-model="password" required />
                <input type="submit" class="btn btn-primary btn-block" id="submit" value="Login" ng-click="login()" />
            </form>
        </div>
    </div>

    <!-- Login Box End -->

    <!--  error Modal start -->

    <div class="modal" role="modal" id="errorPopup">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">Error</div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>

    <!--  error Modal End -->

</div>

將數據傳遞到$scope方式完全取決於您和您的需求。 我的建議是確定所需的內容，僅將其綁定到$scope ，例如，如果僅需要data.resultSet ，則應執行$scope.resultSet 。 另一方面，如果您需要對data對象的完全訪問權限，則應將data綁定到$scope並且仍然可以從那里訪問resultSet ，即$scope.data.resultSet

意見建議：

僅將視圖中需要引用的內容綁定到$scope ，例如，您不需要訪問視圖中的loginSuccess或loginFailure ，並且只使用這兩個函數一次，因此建議您按以下方式更新loginController ：

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

    $scope.login = function() {

        // TODO: if block to validate user input i.e., username and password

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

        WL.Client.invokeProcedure($scope.loginProcedure, {
            onSuccess: function(data) {
                $scope.data = data;
                // resultSet is part of data so you don't need to refrences
                // you can use $scope.data.resultSet to access resultSet
                console.log('success: ' + JSON.stringify($scope.data + " : " + $scope.data.resultSet));
            },
            onFailure: function() {
                console.log('failed');
            }
        });
    }
});

需要單擊兩次提交按鈕以調用IBM Mobile First中的onSuccess Adapter函數

問題描述

1 個解決方案

解決方案1
2 2016-05-27 07:13:22

需要單擊兩次提交按鈕以調用IBM Mobile First中的onSuccess Adapter函數

問題描述

1 個解決方案

解決方案1 2 2016-05-27 07:13:22

解決方案1
2 2016-05-27 07:13:22