javascript - app.run 函数后指令中的 Angular 1 Ctrl 函数

Question

我的菜单有一个指令。在 $rootScope 中，我设置了公司和用户权限。根据所选公司和权限，我呈现菜单。

我在app.run函数中设置了公司和用户权限。到目前为止，这是有效的，但有时菜单指令会在服务调用完成之前呈现。服务获取调用完成后是否可以渲染菜单指令？

谢谢

app.run(function($rootScope, $http, $stateParams, $state, $q,  goliathCompanyCheck)
{
....
....
....
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    var company_id = toParams.company_id;
    if (company_id) {
        var perm = goliathCompanyCheck.get({object: company_id},
            function(response){
                if (!response || !response.status || response.status == 'ERROR') {
                    $state.go('company_selector');
                }
                $rootScope.currentCompany = response.data.company;


            },
            function(response){
                $state.go('company_selector');
            });
    }
});

});

Answer 1

我建议使用 UI-Router 来执行此操作，而不是在运行 block 中的 rootscope 上执行此操作。

这允许您将其指定为 View 的依赖项。这样，除非解析了 CurrentCompany，否则您的 View 将不会加载，否则将触发状态更改失败。

在此示例中，您的状态“app”是应用程序的基本状态，并且需要在 url 中提供公司 ID，以便您可以解析 View 的 CurrentCompany。在 app.html 中，您可以拥有菜单组件的所有标记和指令，并且您的页面可以是“app”状态的 subview ，这意味着它们都可以访问 CurrentCompany 依赖项。

查看文档 here

angular.module('app')
    .config(function ($stateProvider) {
        $stateProvider
            .state('app', {
                url: '/:companyId/'
                templateUrl: 'app.html',
                controller: 'AppCtrl',
                resolve: {
                    //State won't resolve until CurrentCompany does
                    CurrentCompany: function ($stateParams, goliathCompanyCheck) {
                        return goliathCompanyCheck.get({object: $stateParams.companyId});
                    }
                }
            })
            .state('app.home', {
                url: 'home/',
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
            })
    })
    .controller('AppCtrl', function ($scope, CurrentCompany) {
        //CurrentCompany gets injected into the controller and you can assign it to scope
        $scope.CurrentCompany = CurrentCompany;
    })
    .controller('HomeCtrl', function ($scope, CurrentCompany) {
        //Can inject it into the child state as well if you want
        //but it's still available on the scope if the view is nested
    })