如何将变量从控制器内部的函数传递到控制器范围?

时间:2015-11-12 18:54:27

标签: javascript angularjs

我有以下控制器:

myApp.controller('myCtrl', ['$scope', '$rootScope', '$location', 'myService',
    function($scope, $rootScope, $location, myService) {
        $scope.myArray = [];
        $scope.myFunction = function() {
            if (something) {
                setTimeout(function(){
                    $scope.myFunction();
                },500);
            } else {
                var itm = $rootScope.var;

                for (var i in itm) {
                    if (itm.hasOwnProperty(i)) {
                        $scope.myArray.push(itm[i].value);
                    }
                }
                // first console.log
                console.log($scope.myArray);
            }
        }

        $scope.myFunction();

        // second console.log
        console.log($scope.myArray);
    }   
]);

在上面的示例中,第二个console.log在第一个之前打印出来。为什么会这样?有没有办法让控制器等待执行/返回函数,然后才继续执行其余的代码?

1 个答案:

答案 0 :(得分:1)

没有看到一切如何实施。这是我能帮到你的最好的。如果您希望控制器仅在承诺成功时执行某些操作,则可以围绕请求包装代码。在plunkr中,我编写了一个示例$ http服务,该服务对myFunction有一个使用$ q的虚假请求。

我建议使用工厂在控制器而不是$ rootScope之间共享数据。 $ rootScope很难在大型SPA中管理。 Plunkr评论了你可以在$ rootScope和使用Factory之间进行更改的选项。

以下的服务
app.service('Service', Service);

function Service($q, $rootScope, Factory) {
  var deferred = $q.defer();

    this.myFunction = function(){
            //Using factory to persit data instead of $rootScope
            //var itm = Factory.myArray;

            var itm = $rootScope.var;
            var array = [];

            //Item isnt set return error
            if(itm === undefined || itm === null) deferred.reject("$rootScope.var is not set")

            //Changed this a bit didnt know what $rootScope.var actually was
            for (var i in itm) {
                array.push(itm[i]);
            }

            deferred.resolve(array);
            return deferred.promise;
        }

    return this;
}

控制器执行的第一件事是初始化对Service.myFunction()的请求,并等待成功或错误回调。成功之后,您可以处理并执行您对承诺返回的数据所做的任何事情。如果出现错误,您可以按照自己的意愿处理。

app.controller('controller', controller);

function controller(Service, $rootScope) {
    /* jshint validthis: true */
    var vm = this;
    vm.myArray = [];
    vm.request = "";

    //Un-Comment this to return success or error
    $rootScope.var = [1,2,3,4,5,6];

    //This is a fake http request
    Service.myFunction().then(
      //if the promise was resolved or $http was a success
      //initilize the controller
        function(data) {

            vm.myArray = (data)


        },
        //if the promise was resolved or $http was a success
        //initilize the controller
        function(err) {
            vm.request = (err)
        })
}

Plunkr