将异步 REST 调用 JSON 添加到 Angular $scope

Question

我需要一些帮助来理解如何构建AngularJS控制器。

控制器将执行对 SharePoint 的异步 REST 调用，并将 JSON 结果放入$scope中。"搜索结果"属性。

异步 REST 调用由 getDataSP（） 函数和$scope执行。搜索结果在 onQuerySuccess（） 回调中分配。 onQuerySuccess（） 方法具有以下语句：

console.log('Search Results Returned.' + $scope.SearchResults);

它

确实显示预期的"[对象对象]"，所以我知道它正在返回一些东西。

但是，HTML 页面具有以下标记来显示 JSON 对象。我也希望它显示"[对象对象]"，但它永远不会出现！

<span >{{SearchResults}}<span>

下面是整个模块的代码。

(function () {
    var app = angular.module('FormApp', []);
    app.controller('FormController', ['$scope', function ($scope) {
        var context = SP.ClientContext.get_current();
        var user = context.get_web().get_currentUser();
        function onQuerySuccess() {
            if (results && results.m_value && results.m_value.ResultTables && results.m_value.ResultTables[0] && results.m_value.ResultTables[0]) {
                $scope.SearchResults = results.m_value.ResultTables[0];
                console.log('Search Results Returned.' + $scope.SearchResults);
            } else {
                results = {};
                console.log('Search Results Failed');
            }
        }
        function onQueryFail(sender, args) {
            console.log('Query failed. Error:' + args.get_message());
        }
        function getDataSP() {

            var keywordQuery = new Microsoft.SharePoint.Client.Search.Query.KeywordQuery(context);
            keywordQuery.set_queryText("*");
            keywordQuery.set_sourceId("d0aa2c2e-7709-46f1-835a-244f483e4b0e");
            var managedProperties = ['RefinableString00'];
            var kwqProperties = keywordQuery.get_selectProperties();
            for (var i = 0; i < managedProperties.length; i++) {
                kwqProperties.add(managedProperties[i]);
            }
            var searchExecutor = new Microsoft.SharePoint.Client.Search.Query.SearchExecutor(context);
            results = searchExecutor.executeQuery(keywordQuery);
            context.executeQueryAsync(onQuerySuccess, onQueryFail)
        };

        getDataSP();

        $scope.ProjectSelected = function (proj) {
            $scope.SelectedProj = proj;
        };
    }
    ]);

    angular.bootstrap(document.body, ['FormApp']);
})();

Answer 1

你需要

通知 Angular 你更改了模型。通常，当您的代码被触发或 Angular 处理回调时，它会自动检查，但在这种情况下，它对你的回调一无所知。您只需在回调结束时调用$scope.$apply()即可完成此操作。

更多信息： https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply（）