angular 1.5 passes undefined value to a controler after state.Provider “resolve”

问题

I have this code:

app.js

var promptoWeb = angular.module('promptoWeb', ['ngMaterial', 'ngAnimate', 'ngMessages',
    'ngAria', 'ui.router', 'ui.sortable', 'ngFileUpload']);
(function (app) {

    app.factory('env', function () {
        var domain = {domain: "http://localhost:8860/Elton"};

        return domain;
    });


    app.config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
        function ($stateProvider, $urlRouterProvider, $compileProvider) {

            self = this;
            $compileProvider.preAssignBindingsEnabled(true);

            $urlRouterProvider.otherwise('/');

            $stateProvider.state('home', {
                url: '/',
                template: '<home-component></home-component>',
                component: 'homeComponent',
                params: {
                    selectedFilter: undefined
                },
                resolve: {
                    ldapGroup: function (authorizationService) {
                        return authorizationService.getLdapGroup() === 'WazeAdOps';
                    }
                }
            })
        }]);

})(promptoWeb);

and home-component.js

(function (app) {
    app.component('homeComponent', {
        templateUrl: 'partials/home-partial.html',
        controller: ['$scope', '$state', function ($scope, $state, ldapGroup) {

            var self = this;

            self.isFullList = false;
            self.ldapGroup = ldapGroup;


            self.addVoice = function () {
                $state.go("add");
            };

            $scope.$broadcast('searchNoFilter');
        }]
    });

})
(promptoWeb);

why do i get an error in home-component that `ldapGroup is undefined?

and if I change to:

(function (app) {
    app.component('homeComponent', {
        templateUrl: 'partials/home-partial.html',
        controller: ['$scope', '$state', 'ldapGroup',function ($scope, $state, ldapGroup) {

I get an error:

Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup

I have also tried:

(function (app) {
    app.component('homeComponent', {
        templateUrl: 'partials/home-partial.html',
        bindings: {
            ldapGroup: '<'
        },
        controller: ['$scope', '$state', function ($scope, $state) {

            var self = this;

            self.isFullList = false;
            $scope.isAdOps = !self.ldapGroup? true : self.ldapGroup;

I get self.ldapGroup === undefined

回答1:

why do i get an error in home-component that ldapGroup is undefined?

Because you've told Angular to inject $scope and $state, so the third argument of the function is undefined.

controller: ['$scope', '$state', function ($scope, $state, ldapGroup)

I get an error:

Error: [$injector:unpr] Unknown provider: ldapGroupProvider <- ldapGroup

Because there is no service named ldapGroup. ldapGroup is a resolve of your state, which can be injected into the controller of that state. But your state has no controller. It has a component.

How to use components, and how resolves are bound to inputs of the component, is described in the documentation

来源：https://stackoverflow.com/questions/49597133/angular-1-5-passes-undefined-value-to-a-controler-after-state-provider-resolve

标签

angularjs

dependency-injection

state