javascript - Angularjs 绑定(bind)到 Ajax 返回值

Question

我有一个 angularjs 应用程序，它具有以下工厂方法，可以进行实时 API 调用:

//Return SP json by SPID
    azureMobileClient.getSPjsonBySPID = function (callback, spid)
    {
        azureMobileClient.azureMSC.invokeApi("get_spjson_byspid", {
            parameters: {
                spid: spid
            },
            method: "get"
        }).done(function (results) {
            //console.log(results.result);

            callback(results.result);
        }, function (error) {
            alert(error.message);
        });
    }

我有以下 Controller 的方法来使用它

$scope.getSPName = function (spid)
    {

        console.log("SPID:", spid);

        var returnedName;

        AzureMobileClient.getSPjsonBySPID(function (item)
        {
            console.log("item.fullname:", item.fullname);
            returnedName = item.fullname;


        }, spid);

        return returnedName;
    }

这就是我当前尝试在我的 View 中绑定(bind)返回的 item.fullname 的方式(在 ng-repeat 内部):

<p>
{{getSPName(t.parsedjsondata.SPId)}}
</p>

问题是绑定(bind)不起作用，尽管我确实看到了具有正确 item.fullname 的 console.log() 值。我猜测这与 API 调用的延迟有关，我需要在某处插入 $scope.$apply() 但我不知道该怎么做。

Answer 1

您的代码中有一些不好的做法。一些建议:

1. 在工厂方法中使用 Promise，即 $q。
2. 尽量不要在表达式 {{}} 中使用昂贵的函数。它们经常作为 Angular 脏检查过程的一部分进行评估。

解决问题的一种方法是更改​​ Angular 服务函数以返回 promise :

azureMobileClient.getSPjsonBySPID = function (spid)
{
    var deferred = $q.defer();
    azureMobileClient.azureMSC.invokeApi("get_spjson_byspid", {
        parameters: {
            spid: spid
        },
        method: "get"
    }).done(function (results) {
        //console.log(results.result);
        deferred.resolve(results.result);
    }, function (error) {
        alert(error.message);
        deferred.reject(error);
    });
    return deferred.promise;
}

然后在你的 Controller 中执行如下操作:

$scope.spName = null;
azureMobileClient.getSPjsonBySPID(spid).then(function(item){
    $scope.spName = item.fullname;
}, function(error) {
    // Show error
});