Question

我在主app.js中有路由配置。

// app.js
angular.module('myApp', ["ngRoute"])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/templates/company-list.html',
        controller: 'CompanyListCtrl as companyListCtrl'
    }).when(...

虽然在app.js中我有一个指令将图像渲染为模板的div的背景css元素。

/app.js 
// Directives
angular.module('myApp')
    .directive('backImg', function () {
        return function (scope, element, attrs) {
            var url = attrs.backImg;
            element.css({
                'background-image': 'url(' + url + ')',
                'background-size': 'cover'
            });
        };
    });

CompanyListCtrl控制器依赖于http服务，该服务调用服务器并返回数据。该数据包含＆＃39; url＆＃39;对于上述指令。

 //controllers.js
 angular.module('myApp')
        .controller('CompanyListCtrl', ['CompanyService', function (CompanyService) {
            var self = this;
            self.companies = [];

            CompanyService.getCompanies().then(function (response) {
                self.companies = response.data;
            });
        }]);

我的＆＃39; company-list.html＆＃39;带有指令的模板在返回异步数据之前呈现。我想我需要使用＆＃39; resolve＆＃39;但是，在路由配置中，当$ htt.get呼叫作为外部服务实现时，依赖应该是什么？

Answer 1

使用解析选项：

resolve - {Object。=} - 可选的地图   应该注入控制器的依赖项。如果有的话   这些依赖是承诺，路由器将等待它们全部到   在控制器之前被解决或被拒绝   实例化。如果所有承诺都成功解决了，那么   注入的Promises的值被注入并且$ routeChangeSuccess   事件被解雇了。如果任何承诺被拒绝了   触发$ routeChangeError事件。地图对象是：

key - {string}：要注入的依赖项的名称   控制器。 factory - {string | function}：如果是string，那么它就是别名   为了服务。否则如果功能，那么它是注入和   返回值被视为依赖项。如果结果是承诺，   在将值注入控制器之前解决它。是   意识到ngRoute。$ routeParams仍然会引用之前的路线   在这些解决功能中。使用$ route.current.params进行访问   相反，新的路线参数。

angular.module('myApp', ["ngRoute"])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/templates/company-list.html',
        controller: 'CompanyListCtrl as companyListCtrl'
        resolve: {
            companies: ['CompanyService', '$route', function(CompanyService, $route) {
                return CompanyService.getCompanies($route.current.params.companyId).then(function(response) {
                    return response.data;
                }
            }]
        }
    }).when(...    


angular.module('myApp')
        .controller('CompanyListCtrl', ['companies', function (companies) {
            var self = this;
            self.companies = companies;


        }]);

异步http.get调用完成后加载html模板

1 个答案: