Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/25.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 组件:ui路由器解析将不会注入控制器,数据未定义_Javascript_Angularjs_Angular Promise - Fatal编程技术网

Javascript 组件:ui路由器解析将不会注入控制器,数据未定义

Javascript 组件:ui路由器解析将不会注入控制器,数据未定义,javascript,angularjs,angular-promise,Javascript,Angularjs,Angular Promise,我在使用组件和ui路由器解析时遇到了这个问题,解析承诺之后的数据在控制器中是“未定义”的 服务: class userService { constructor ($http, ConfigService, authService) { this.$http = $http; this.API_URL = `${ConfigService.apiBase}`; this.authService = authService; } testAuth () {

我在使用组件和ui路由器解析时遇到了这个问题,解析承诺之后的数据在控制器中是“未定义”的

服务:

class userService {
  constructor ($http, ConfigService, authService) {
    this.$http = $http;
    this.API_URL = `${ConfigService.apiBase}`;
    this.authService = authService;
  }


testAuth () {
    return this.$http.get(this.API_URL + '/test-auth')
 }

getCollaboratores () {
    return this.$http.get(this.API_URL + '/collaboratores').then( 
          (resolve) => {   // promise resolve
          console.log('Success',resolve.data);
     }
   )
 }

getAccount () {
   var config = {
   headers: { "X-Shark-CollaboratoreId" : "1"}
  };
  return this.$http.get(this.API_URL + '/accounts' + '/' + 1,     config).then( 
          (resolve) => {   // promise resolve
              console.log('Success',resolve.data);
      }
   )
 }
.config(($stateProvider, $urlRouterProvider) => {
 "ngInject";

 $urlRouterProvider.otherwise('/');

 $stateProvider
   .state('core', {
      redirectTo: 'dashboard',
      url: '/core',
      component: 'core',
      resolve: {
        userdata: (userService) => {
            return userService.getCollaboratores();
        },
        accdata: (userService) => {
            return userService.getAccount();
        }
      }

    });
})
let self;

class CoreController {
  constructor($state,userService,authService,userdata,accdata) {
    this.name = 'core';
    this.$state = $state;
    this.userService = userService;
    this.authService = authService;
    this.userdata = userdata;
    this.accdata = accdata;
    console.log('name',this.name);
    self = this;
    console.log('userdata',self);
  }
}

CoreController.$inject = ['$state','userService',     'authService','userdata','accdata'];

export default CoreController;
模块/组件/布线:

class userService {
  constructor ($http, ConfigService, authService) {
    this.$http = $http;
    this.API_URL = `${ConfigService.apiBase}`;
    this.authService = authService;
  }


testAuth () {
    return this.$http.get(this.API_URL + '/test-auth')
 }

getCollaboratores () {
    return this.$http.get(this.API_URL + '/collaboratores').then( 
          (resolve) => {   // promise resolve
          console.log('Success',resolve.data);
     }
   )
 }

getAccount () {
   var config = {
   headers: { "X-Shark-CollaboratoreId" : "1"}
  };
  return this.$http.get(this.API_URL + '/accounts' + '/' + 1,     config).then( 
          (resolve) => {   // promise resolve
              console.log('Success',resolve.data);
      }
   )
 }
.config(($stateProvider, $urlRouterProvider) => {
 "ngInject";

 $urlRouterProvider.otherwise('/');

 $stateProvider
   .state('core', {
      redirectTo: 'dashboard',
      url: '/core',
      component: 'core',
      resolve: {
        userdata: (userService) => {
            return userService.getCollaboratores();
        },
        accdata: (userService) => {
            return userService.getAccount();
        }
      }

    });
})
let self;

class CoreController {
  constructor($state,userService,authService,userdata,accdata) {
    this.name = 'core';
    this.$state = $state;
    this.userService = userService;
    this.authService = authService;
    this.userdata = userdata;
    this.accdata = accdata;
    console.log('name',this.name);
    self = this;
    console.log('userdata',self);
  }
}

CoreController.$inject = ['$state','userService',     'authService','userdata','accdata'];

export default CoreController;
控制器:

class userService {
  constructor ($http, ConfigService, authService) {
    this.$http = $http;
    this.API_URL = `${ConfigService.apiBase}`;
    this.authService = authService;
  }


testAuth () {
    return this.$http.get(this.API_URL + '/test-auth')
 }

getCollaboratores () {
    return this.$http.get(this.API_URL + '/collaboratores').then( 
          (resolve) => {   // promise resolve
          console.log('Success',resolve.data);
     }
   )
 }

getAccount () {
   var config = {
   headers: { "X-Shark-CollaboratoreId" : "1"}
  };
  return this.$http.get(this.API_URL + '/accounts' + '/' + 1,     config).then( 
          (resolve) => {   // promise resolve
              console.log('Success',resolve.data);
      }
   )
 }
.config(($stateProvider, $urlRouterProvider) => {
 "ngInject";

 $urlRouterProvider.otherwise('/');

 $stateProvider
   .state('core', {
      redirectTo: 'dashboard',
      url: '/core',
      component: 'core',
      resolve: {
        userdata: (userService) => {
            return userService.getCollaboratores();
        },
        accdata: (userService) => {
            return userService.getAccount();
        }
      }

    });
})
let self;

class CoreController {
  constructor($state,userService,authService,userdata,accdata) {
    this.name = 'core';
    this.$state = $state;
    this.userService = userService;
    this.authService = authService;
    this.userdata = userdata;
    this.accdata = accdata;
    console.log('name',this.name);
    self = this;
    console.log('userdata',self);
  }
}

CoreController.$inject = ['$state','userService',     'authService','userdata','accdata'];

export default CoreController;
在控制器中注入对象后,对象在“http”调用后通过承诺“解析”

没有定义

臭虫在哪里


非常感谢…

将getCollaboratores函数更改为以下内容:

getCollaboratores () {
  return this.$http.get(this.API_URL + '/collaboratores').then( 
      (resolve) => {   // promise resolve
      console.log('Success',resolve.data);
      return resolve;
   });
}
对另一个getAccount执行相同的操作(即在成功回调返回解析中)

这会解决你的问题


原因是一旦您链接成功回调,第一次回调将返回可以作为第二次回调参数的某物。由于服务中的成功回调没有返回任何内容(js中函数的默认返回值未定义),因此解析值在控制器中不可用。

将getCollaboratores函数更改为以下值:

getCollaboratores () {
  return this.$http.get(this.API_URL + '/collaboratores').then( 
      (resolve) => {   // promise resolve
      console.log('Success',resolve.data);
      return resolve;
   });
}
对另一个getAccount执行相同的操作(即在成功回调返回解析中)

这会解决你的问题


原因是一旦您链接成功回调,第一次回调将返回可以作为第二次回调参数的某物。由于服务中的成功回调没有返回任何内容(js中函数的默认返回值未定义),因此解析值在控制器中不可用。

您使用的是什么版本的angularjs

请记住,在1.6中,
然后
回调现在接收4个参数:
数据
状态
标题
配置
状态文本

在这种情况下,
resolve.data
可能导致
未定义的值


关于文档的更多信息:$http

您使用的是什么版本的angularjs

请记住,在1.6中,
然后
回调现在接收4个参数:
数据
状态
标题
配置
状态文本

在这种情况下,
resolve.data
可能导致
未定义的值


有关文档的更多信息:$http

我发现您与处于您的状态的组件相关,而不是与控制器相关,因此您应该创建一个组件并将解析的值绑定到它

angular
    .module('app')
    .component('core', {
        templateUrl: 'app/app.html',
        controller: CoreController,
        controllerAs: 'vm',
        bindings: {
          userdata: '<',
          accdata: '<'
        }
    });

我发现您与处于您的状态的组件相关,而不是与控制器相关,因此您应该创建一个组件并将解析的值绑定到它

angular
    .module('app')
    .component('core', {
        templateUrl: 'app/app.html',
        controller: CoreController,
        controllerAs: 'vm',
        bindings: {
          userdata: '<',
          accdata: '<'
        }
    });

console.log('Success',resolve.data)的输出是什么?输出正确:成功对象{data:Array[1]}。。。。如果RESOLVE所有代码都不能正常工作,我尝试在promise RESOLVE之后使用RESOLVE来呈现视图。
console.log('Success',RESOLVE.data')的输出是什么?输出正确:成功对象{data:Array[1]}。。。。如果RESOLVE所有代码都不能正常工作,我尝试在promise RESOLVE之后使用RESOLVE渲染视图。回调不
不返回任何内容<代码>返回未定义
添加到js函数,如果没有任何内容覆盖
返回
指令。有关
.then()
的详细信息。什么是真正的
解析
?。来自sources
557:@return{object}表示包含所有invocables的解析返回值以及任何继承值和本地值的对象。这意味着您的解析实际上是一个
承诺(()=>返回Promise.all(resolve.keys))
。他们大多数返回未定义的
。对不起,我不理解你的反馈,你能正确缩进答案吗。谢谢。我也希望这样。@SimoneLazzaroni您能为您的代码设置一个提琴或plunkr进行测试吗。上述解决方案对于meCallback not
不返回任何内容非常有效<代码>返回未定义
添加到js函数,如果没有任何内容覆盖
返回
指令。有关
.then()
的详细信息。什么是真正的
解析
?。来自sources
557:@return{object}表示包含所有invocables的解析返回值以及任何继承值和本地值的对象。这意味着您的解析实际上是一个
承诺(()=>返回Promise.all(resolve.keys))
。他们大多数返回未定义的
。对不起,我不理解你的反馈,你能正确缩进答案吗。谢谢。我也希望这样。@SimoneLazzaroni您能为您的代码设置一个提琴或plunkr进行测试吗。上述溶液适用于meHi@Alexase i使用Angular 1.5.9Hi@Alexase i使用Angular 1.5.9