Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/20.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 手动进入编译阶段_Javascript_Angularjs_Oclazyload - Fatal编程技术网

Javascript 手动进入编译阶段

Javascript 手动进入编译阶段,javascript,angularjs,oclazyload,Javascript,Angularjs,Oclazyload,我使用ocLazyLoad在Angular中按需加载模块。这些模块完全不同,我们应该使用服务器检查应该加载哪个模块。在使用ocLazyLoad之前,我在主视图中加载了这些独立模块的所有连接js文件。所以我们都在装货 现在很明显,我正在按需加载这些文件,这意味着它应该从服务器读取数据,看看应该加载哪些模块,加载一个兆字节的文件,最重要的是,在angular开始编译视图之前加载它 我使用ocLazyLoad的promise$编译视图(body),但由于它被编译了两次甚至更多次,有时我的指令无法工作

我使用ocLazyLoad在Angular中按需加载模块。这些模块完全不同,我们应该使用服务器检查应该加载哪个模块。在使用ocLazyLoad之前,我在主视图中加载了这些独立模块的所有连接js文件。所以我们都在装货

现在很明显,我正在按需加载这些文件,这意味着它应该从服务器读取数据,看看应该加载哪些模块,加载一个兆字节的文件,最重要的是,在angular开始编译视图之前加载它

我使用ocLazyLoad的promise$编译视图(body),但由于它被编译了两次甚至更多次,有时我的指令无法工作

所以我想我有两个选择:

  • 让angular在ocLazyLoad注入和加载模块后手动编译视图(我搜索了很多,但找不到如何编译!!)

  • 从服务器上读取所需模块的列表,并在应用程序的可能运行阶段或angular.bootstrap之前使用LazyLoad。(我已经这样做了,但是由于$http请求是异步完成的,所以它有时工作,在angular编译之前加载,有时不工作)

  • 如果你能帮我,我将不胜感激

    spa.run(['$rootScope', '$location', '$route', '$localStore', '$templateCache', 'Analytics', 'preflightValue', '$ocLazyLoad', '$http',
    '$compile', function($rootScope, $location, $route, $localStore, $templateCache, Analytics, preflightValue, $ocLazyLoad, $http, $compile ) {
        $rootScope.$on('cfpLoadingBar:completed', function(event, args) {
            angular.element($('body')).addClass('cfp-done');
        });
    
        $http({
            method: 'POST',
            url: url,
            data: {
                route: "/dashboard"
            },
            headers: {
                // My Headers
            }
        }).success(function (data, status, header, config) {
            var currentModules = $ocLazyLoad.getModules();
            for (var i = 0; i < data.data.cloudwares.length; i++) {
                var moduleName = data.data.cloudwares[i];
                if (currentModules.indexOf(moduleName) === -1 && moduleName !== 'bot-manager') {
                    preflightValue.addModule(moduleName);
                }
            }
            $ocLazyLoad.load(preflightValue.modulesList()).then(function () {
                preflightValue.emptyList();
            });
        });
    }]);
    
    spa.run(['$rootScope','$location','$route','$localStore','$templateCache','Analytics','preflightValue','$ocLazyLoad','$http',
    “$compile”,函数($rootScope、$location、$route、$localStore、$templateCache、分析、preflightValue、$ocLazyLoad、$http、$compile){
    $rootScope.$on('cfpLoadingBar:completed',函数(事件,参数){
    angular.element($('body')).addClass('cfp-done');
    });
    $http({
    方法:“POST”,
    url:url,
    数据:{
    路线:“/仪表板”
    },
    标题:{
    //我的标题
    }
    }).success(函数(数据、状态、标题、配置){
    var currentModules=$ocLazyLoad.getModules();
    对于(var i=0;i
    //更新


    请注意,我们没有使用ui路由器或ngRouter。我们每次都使用$resource从服务器获取路由状态。

    在您的配置文件中,尝试使用lazyload事件声明路由

    app
    .config(function ($stateProvider, $urlRouterProvider,ParseProvider){
    
            .state ('home', {
                url: '/home',
                // templateUrl: 'views/home.html',
                templateUrl: 'views/home.html',
                resolve: {
                    loadPlugin: function($ocLazyLoad) {
                        return $ocLazyLoad.load ([
                            {
                                name: 'css',
                                insertBefore: '#app-level',
                                files: [
                                    'vendors/bower_components/fullcalendar/dist/fullcalendar.min.css',
                                ],
    
                            },
                            {
                                name: 'vendors',
                                insertBefore: '#app-level-js',
                                files: [
                                    'vendors/sparklines/jquery.sparkline.min.js',
                                    'vendors/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js',
                                    'vendors/bower_components/simpleWeather/jquery.simpleWeather.min.js'
                                ]
                            }
                        ])
                    }
                }
            })
    })
    

    从此,您可以将任何脚本加载到视图中

    我实际上通过问另一个问题解决了这个问题!我所要做的就是回报两个承诺


    找到解决方案

    谢谢你的回答,朋友。但我们没有使用ui路由器或ngRouter。我正在寻找的是让angular等待lazyload完成,然后开始编译指令,等等。如果您愿意,请阅读我对上述问题的评论!谢谢我实际上正在使用您的解决方案,但仍然面临一些问题!他们是什么!你能告诉他们吗,附上了out out of console.log(),如果你能详细说明你的视图是什么样子,以及你是如何引导最初的spa应用程序的,我可以更好地了解什么是最适合你的用例的解决方案。@vileRaisin因为整个系统由许多相互连接的服务和控制器组成,恐怕我不能那样做!这里的主要问题是,我不能告诉angular等待$http请求完成,然后加载所需的模块,最后转到run()。我已经将延迟加载移动到$routeProvider resolve,但只有并且只有在我静态地告诉它应该加载哪些文件时,它才会这样做。但我显然找不到一种方法,在angular编译视图之前,向服务器发出$http请求,获取所需的模块,然后将其传递给$ocLazyLoad@Vileraissin我甚至尝试了这个名为angular deferred bootstrap的插件,它允许您在angular启动之前发出$http请求!它将数据传递给一个常量,稍后我将该常量作为常量注入$oclazyload函数。一切都很顺利。我们有数据,$oclazyload在angular开始编译之前运行良好!但有一个奇怪的问题我不明白为什么会发生$ocLazyLoad重新加载自身和“ng”模块“$invoke”服务,我认为这会阻止angular编译指令。这一次问题解决了,但什么也没显示出来!但是,有两种解决方案,我需要理解你的观点,因为你很可能需要改变你的观点。一种简单的方法是在你的页面上有两个独立的Angle应用程序,第一个是加载lazyLoad,加载完成后,你可以将应用程序的其余部分引导到视图的一个单独部分。这意味着您需要在启动这些应用程序的视图中进行分离。另一种可能根据您的用例而起作用的方法是,在视图周围有一个包装器指令,并将其设置为terminal。这个包装器指令只有在所有模块都已引导后才开始编译。类似地,也有其他方法来实现这一点,但同样,如果不理解您的观点,几乎不可能理解什么是好的解决方案。