Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/451.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Angular.js延迟控制器初始化_Javascript_Angularjs - Fatal编程技术网

Javascript Angular.js延迟控制器初始化

Javascript Angular.js延迟控制器初始化,javascript,angularjs,Javascript,Angularjs,我想延迟控制器的初始化,直到必要的数据从服务器到达 我为Angular 1.0.1:找到了此解决方案,但无法使其与Angular 1.1.0一起使用 模板 <script type="text/ng-template" id="/editor-tpl.html"> Editor Template {{datasets}} </script> <div ng-view> </div> 您可以查看一个几乎相同的问题,该问题使用了资源,但对$h

我想延迟控制器的初始化,直到必要的数据从服务器到达

我为Angular 1.0.1:找到了此解决方案,但无法使其与Angular 1.1.0一起使用

模板

<script type="text/ng-template" id="/editor-tpl.html">
Editor Template {{datasets}}
</script>
    <div ng-view>
</div>

您可以查看一个几乎相同的问题,该问题使用了资源,但对$http的作用方式相同。我认为这应该行得通

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets: function($http, $q) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
        }

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​

由于$http返回一个承诺,因此在http数据到达时创建自己的延迟协议只是为了返回承诺,这对性能是一个打击。您应该能够做到:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'});
    }
};
如果您需要对结果进行一些处理,请使用.then,您的承诺将被免费链接:

MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return frob (data);
               });
    }
};
您总是可以在最外层的DOM元素上放置“ng show”,并将其设置为您想要等待的数据

对于Angular JS主页上列出的示例,您可以看到这是多么简单: 所要做的就是 这样,在设置该值之前,表单不会显示


更直观,这样做的工作量更少。

谢谢,修复了一两个语法错误,下面是工作代码:我想说,在这种情况下,用另一个承诺包装$http的承诺对性能的影响太小了,不值得担心。然而,由于额外承诺被排除在外而产生的更简洁的代码是一个值得追求的目标。代码是好的和干净的,但是到今天为止,小提琴被打破了,显示了文档源代码。太新了,除了注意到这一点之外,没有什么帮助。小提琴没有坏,它会显示http请求的结果:)如果有多个数据加载怎么办?你不知道哪一个会结束,因为它们都在运行。例如…假设我需要在选择框中显示5个选项以及与第一个选项相关的所有数据,这样我就可以预加载表单???如果你有5个,没问题,在每个选项加载后,只需记下,一旦所有5个选项都完成,就可以开心了。您只需要在数组中添加一些变量,并在每次数据加载后检查长度是否为5,然后在5之后设置另一个变量(ng show基于该变量)并重置计数数组。
MyCtrl.resolve = {
    datasets: function ($http) {
        return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return frob (data);
               });
    }
};