Execute SharePoint Function On Page Load in AngularJS Application ($scope issue???)

问题

I am using SharePoint's JavaScript Object Model in an AngularJS app and need one of its functions to execute on page load so an array is populated and used by an ng-repeat.

Currently, it logs to the console the array push on page load, but does not appear to commit the values into the array for use on the page/$scope until I click in/then out of a input box, click OK on an alert box, or a dummy link that keeps me on the page. This is where I am confused as to why it can log the array properly on load, but not have the array ready in $scope for the page.

I have tried the following, but without success:

1) I have moved the call to execute the function to the bottom of the controller

2) I have tried angular.element(document).ready

3) I have tried wrapping it in a function such as:

$scope.initTaxonomy = function () {
        $(function () {
        // Function here
        });
        };

What I don't understand is why the following, which calls to a REST service, executes on page load/works perfectly by pushing into $scope for use in an ng-repeat, while my function doesn't:

 // Array holding items for display on homepage
    $scope.items = [];

    appItems.query(function (result) {
        // Data is within an object of "value", so this pushes the server side array into the $scope array
        var result = result.value;
        var userInfo;

        // Foreach result, push data into items array
        angular.forEach(result, function (resultvalue, resultkey) {

            $scope.items.push({
                title: resultvalue.Title,
                status: resultvalue.Status
             });
        });
    });

This is the function that will successfully log to the console on page load, but won't populate the array in my ng-repeat until I click around on the page:

    var termsArray = [];

    $scope.termsArray = termsArray;

    execOperation();

    function execOperation() {
        //Current Context
        var context = SP.ClientContext.get_current();
        //Current Taxonomy Session
        var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
        //Term Stores
        var termStores = taxSession.get_termStores();
        //Name of the Term Store from which to get the Terms.
        var termStore = termStores.getByName("Taxonomy_1111");
        //GUID of Term Set from which to get the Terms.
        var termSet = termStore.getTermSet("1111111");
        var terms = termSet.getAllTerms();
        context.load(terms);
        context.executeQueryAsync(function () {
            var termEnumerator = terms.getEnumerator();
            while (termEnumerator.moveNext()) {
                var currentTerm = termEnumerator.get_current();
                var guid = currentTerm.get_id();
                var guidString = guid.toString();
                termsArray.push({
                    termName: currentTerm.get_name(),
                    termGUID: guidString,
                });
                //getLabels(guid);
            }
            console.log($scope.termsArray)
        }, function (sender, args) {
            console.log(args.get_message());
        });
       };

My controller is loaded with the page via app.js as follows:

$routeProvider.
            when('/', { templateUrl: '/views/home.html', controller: 'appHomeItemsCtrl' }).
            when('/add-item', { templateUrl: '/views/add-item.html', controller: 'appItemPostCtrl' }).
            otherwise({ redirectTo: '/' });  

Is this an issue with SharePoint's JSOM needing something to execute properly, how I am trying to execute in AngularJS, or something else?

回答1:

I was able to get this working. The problem was that Angular doesn't appear to respect non-Angular functions, so using $scope.apply around the push of my array to $scope was effective. Note that wrapping the entire function caused issues with the digest of Angular:

    var termsArray = [];

    execOperation();

    function execOperation() {

            //Current Context
            var context = SP.ClientContext.get_current();
            //Current Taxonomy Session
            var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
            //Term Stores
            var termStores = taxSession.get_termStores();
            //Name of the Term Store from which to get the Terms.
            var termStore = termStores.getByName("Taxonomy_1111");
            //GUID of Term Set from which to get the Terms.
            var termSet = termStore.getTermSet("1111");
            var terms = termSet.getAllTerms();
            context.load(terms);
            context.executeQueryAsync(function () {

                var termEnumerator = terms.getEnumerator();
                while (termEnumerator.moveNext()) {
                    var currentTerm = termEnumerator.get_current();
                    var guid = currentTerm.get_id();
                    var guidString = guid.toString();
                    termsArray.push({
                        termName: currentTerm.get_name(),
                        termGUID: guidString,
                    });

                }
                console.log(termsArray)
                $scope.$apply(function () {
                    $scope.termsArray = termsArray;
                });
            }, function (sender, args) {
                console.log(args.get_message());
            });
          };

来源：https://stackoverflow.com/questions/30349856/execute-sharepoint-function-on-page-load-in-angularjs-application-scope-issue