Question

假设第一次加载网站时我需要加载左侧和顶部菜单。

两个菜单都会独立加载，因此任何人都可以先加载并显示。所以如果顶部或左侧菜单首先加载，请告诉我需要同时显示左侧和顶部菜单的技巧。一些我需要同时显示菜单的方法。

告诉我下面需要更改的代码。下面的代码只是一个示例代码，未经过测试。

app.service("TopMenuService", function ($http) {  
    this.getTopMenu = function () {  
        debugger;  
        return $http.get("/employee/getTopMenu");  
    };  
});  

app.service("LeftMenuService", function ($http) {  
    this.getLeftMenu = function () {  
        debugger;  
        return $http.get("/employee/getLeftMenu");  
    };  
});  

app.controller("EmpCtrl", function ($scope, TopMenuService,LeftMenuService) {  

    GetTopMenu();  
    GetLeftMenu();  

    function GetTopMenu() {  

        debugger;  
        var _getTopMenu = EmployeeService.getTopMenu();  
        _getTopMenu.then(function (topmenu) {  
            $scope.topmenu = topmenu.data;  
        }, function () {  
            alert('Data not found');  
        });  
    }  

    function GetLeftMenu() {  

        debugger;  
        var _getLeftMenu = EmployeeService.getLeftMenu();  
        _getLeftMenu.then(function (leftmenu) {  
            $scope.leftmenu = leftmenu.data;  
        }, function () {  
            alert('Data not found');  
        });  
    }      
});

Answer 1

如果您想确保只有在两个请求完成后才继续 - 请使用$ q.all：

app.controller('EmpCtrl', function($scope, TopMenu, LeftMenu, $q) {
    $q.all([TopMenu.get(), LeftMenu.get()]).then(function(both) {
       var top = both[0];
       var left = both[1];
    });
});

Answer 2

承诺控制的加载菜单过程怎么样？

关于$q.all() 的注意事项AngularJs中的Promise由$q service处理。 Promise用于同步并发环境上的任务执行，AngularJs的$q.all收到各种promise的列表，并在列表中的所有promise都被解析时触发then回调，在这种情况下，这两个承诺是每个菜单的$http.get()，它是一个异步承诺案例，这样当发送响应时，它会解析承诺并触发then()注册的回调，最终会触发$q.all()也是如此。

app.controller("EmpCtrl", function ($scope, $q, TopMenuService, LeftMenuService) {

    $scope.shouldDisplayMenus = false;

    LoadMenus().then(function () {
        $scope.shouldDisplayMenus = true;
    });

    function LoadMenus() {
        return $q.all([
            GetTopMenu(),  
            GetLeftMenu()
        ]);
    }

    function GetTopMenu() {  

        debugger;  
        var _getTopMenu = EmployeeService.getTopMenu();  
        _getTopMenu.then(function (topmenu) {  
            $scope.topmenu = topmenu.data;  
        }, function () {  
            alert('Data not found');  
        });

        return _getTopMenu;
    }  

    function GetLeftMenu() {  

        debugger;  
        var _getLeftMenu = EmployeeService.getLeftMenu();  
        _getLeftMenu.then(function (leftmenu) {  
            $scope.leftmenu = leftmenu.data;  
        }, function () {  
            alert('Data not found');  
        });

        return _getLeftMenu;
    }      
});

Angular v1 +：通过angularjs在页面中加载不同的区域

2 个答案: