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

Question

I need some help understanding how to structure an AngularJS controller.

The controller is to execute an Async REST call to SharePoint and put the JSON results into a $scope.SearchResults property.

The Async REST call is executed by the getDataSP() function and the $scope.SearchResults is assigned in the onQuerySuccess() callback. The onQuerySuccess() method has the statement

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

which does display the expected "[object Object]" so I know it is returning something.

However the HTML page has the following tag to show the JSON object. I also expect it to display "[object Object]" but it never shows up!

<span >{{SearchResults}}<span>

Here is the code for the entire module.

(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

you need to notify Angular that you changed the model. Usually when your code is triggered or the callback handled by Angular, it checks automatically, but in this case, it doesn't know anything about your callback. You can do this simply by calling $scope.$apply() at the end of your callback.

some more info: https://github.com/angular/angular.js/wiki/When-to-use- $scope.$apply()