Question

我正在使用一些AngularJS修改另一个项目。在调用包含$scope.script指令的$scope.workInstruction函数后，我的$scope.dbQuery和$http.post()变量未更新，我遇到了问题。

$http.post()来电成功，但返回的数据未反映在我的$scope

中

我希望一旦$http.post()调用完成，脚本和workInstruction也应该从双向数据绑定更新。

当我直接调用$http.post()方法然后在结尾处分配$scope.script和$scope.workInstruction值时，由于.$apply()包装，它们会自动更新。

如何模拟相同的响应，但用我的方法调用该函数目前的设置？

我尝试使用$scope.$apply()，但没有运气！也许我错误地使用它？我是角色的新手，所以有关如何在视图中更新这些值的建议将不胜感激：）

以下是HTML代码段：

<div class="container" ng-controller="results">
        <button ng-click="sendPost()"/>Query!</button>
        <div class="input-group">
            <span class="input-group-addon" id="script-addon" style="width: 100px">Script:</span>
            <textarea class="form-control" name="script" aria-describedby="script-addon">{{ script }}</textarea>
        </div> 

        <div class="input-group">
            <span class="input-group-addon" id="work-addon" style="width: 100px">Work Instruction:</span>
            <textarea class="form-control" name="script" aria-describedby="work-addon">{{ workInstruction }}</textarea>
        </div> 
</div>

以下是AngularJS：

myApp.controller('results', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.url = "php/dbquery.php";
$scope.tool = 'EAMS';
$scope.category = 'Admin';
$scope.sub_category = 'Access';
$scope.issue = 'Account Locked';

$scope.sendPost = function () {

    var data = $.param({
        table: $scope.tool,
        tool : $scope.tool,
        category: $scope.category,
        sub_category: $scope.sub_category,
        issue: $scope.issue
    });

    var config = {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
        }
    };
    /* THIS IS PROBLEM LOCATION; $scope.script returns undefined */
    $scope.script = $scope.dbQuery($scope.url, data, config);
    $log.info("Script: " + $scope.script);

    var data = $.param({
        table: $scope.tool,
        tool : $scope.tool,
        category: $scope.category,
        sub_category: $scope.sub_category,
        issue: $scope.issue,
        flag: true
    });

    /* THIS IS PROBLEM LOCATION; $scope.workInstruction returns undefined */
    $scope.workInstruction = $scope.dbQuery($scope.url, data, config);        
    $log.info('Work Instruction: ' + $scope.workInstruction);
  }; // End sendPost()

$scope.dbQuery = function dbQuery(url, data, config) {
    $log.debug("In dbuery");
    $http.post(url, data, config)
        .success(function (data, status, headers, config) {
            var result = data[0];
            $log.debug('res: ' + result);
            return result;
        })
        .error(function(data, status, headers, config) {
            var result = 'Bad query: ' + data +
                "<hr />status: "  + status +
                "<hr />headers: " + header +
                "<hr />config: "  + config;
            return result;
        });
    }
}]); // End controller

以下是控制台输出：

    In dbuery
angular.min.js:107 Script: undefined
angular.min.js:107 In dbuery
angular.min.js:107 Work Instruction: undefined
angular.min.js:107 res: Status: Resolved (No Further Action Required)

User,

Your EAMS account has been reactivated. Please reset your password by using the Forgot Password on the login page.

Please see the Ericsson Password Policy below:

    1) Passwords for individual user accounts shall consist of a minimum of 8 characters, being a combination of at least 3 of the following 4 character types; lowercase, uppercase, numeral and special characters.

    2) Change of passwords shall be enforced every 90 days.

    3) Prevent passwords which are equal to the user ID, ericsson, and Ericsson

    4) Prevent password re-use of 15 generations and allow not more than 3 password changes per day.

    5) Accounts shall be locked after 6 consecutive failed attempts to log in within 30 minutes. Automatic unlock is allowed after 30 minutes.

This ticket is considered closed.

Thank you,
angular.min.js:107 res: Verify account has company email address, company assigned, role(s) assigned & Clear Expire. 

If no roles or company, DO NOT Clear Expire. The account will not work for user. 

Do not unlock if public email address. Send Company email mandatory QP.

If Supplier, and you cannot tell from email address, ask user. 

If Ericsson, try to Lync for additional info. If not available, ask user via email.

Answer 1

$ scope.dbQuery立即返回，＆＃39;返回＆＃39;从成功/错误是通过promise api异步调用。您应该在成功回调处理程序

中直接分配$ scope.script

Answer 2

为了避免为我需要从数据库中检索的每个查询$http.post()成员创建$scope，我将一个包含我要查询的内容的参数传递给了我$scope.dbQuery方法。这允许我的回调动态地动态更新我的视图和模型。

    $scope.dbQuery = function dbQuery(url, data, config, member) {
    $log.debug(member);

    $http.post(url, data, config)
        .success(function (data, status, headers, config) {            

            switch (member) {
                case 'tool':
                    $scope.toolSel = data;
                    break;

                case 'category':
                    break;

                case 'subCategory':
                    break;

                case 'issue':
                    break;

                case 'script':
                    $scope.script = data[0];
                    break;

                case 'workInstruction':
                    $scope.workInstruction = data[0];
                    break;

                default:
                    break;
            }
        })
        .error(function(data, status, headers, config) {
            var result = 'Bad query: ' + data +
                "<hr />status: "  + status +
                "<hr />headers: " + header +
                "<hr />config: "  + config;
            $log.error(result);
        });
}

使用$ http进行函数调用后，$ scope成员不会更新

2 个答案: