AngularJS 1.X ES6继承问题

Question

I have an issue trying to access to a parent property in my child Controller. I'm using ES6 syntax and I tried with the extends syntax.

ConversationDetailController (child)

import { ConversationListController} from './conversation-list.controller';

export class ConversationDetailController extends ConversationListController {
constructor ($rootScope, $state, $stateParams, $mdSidenav, $mdDialog, $log, moment, ConversationService, algolia) {
  'ngInject';

  super($rootScope, $state, $log);
  this.conversation = {};
  this.newMessageText = "";
  this.ConversationService = ConversationService;
  this.$stateParams = $stateParams;
  this.$log = $log;
  this.$mdSidenav = $mdSidenav;
  this.$mdDialog = $mdDialog;
  this.moment = moment;
  this.algolia = algolia;

  this.activate();
}

activate() {
  this.$log.debug(this.conversations); // Here I want to access this.conversations from the parent scope.
  let id = this.$stateParams.id;
  return this.ConversationService.getConversationByID(parseInt(id))
  .success((conversation) => {
    this.conversation = conversation;
    this.conversation.messages.forEach((item) => {
      item.relativeDate = this.moment(item.createdAt).clone().fromNow();
      return item;
    });
    this.$log.debug(this.conversation);
    return conversation;
  })
  .error((err) => {
    return err;
  });
}
}

ConversationListController (parent)

export class ConversationListController {
constructor ($rootScope, $state, $log, ConversationService) {
'ngInject';

  this.conversations = [];
  this.ConversationService = ConversationService;
  this.$state = $state;
  this.$log = $log;
  this.showSearch = false;
  this.role = $rootScope.role;
  this.currentUser = $rootScope.currentUser;

  this.activate();
}

activate() {
  if (this.currentUser.doctor) {
    this.ConversationService.getConversationList(this.currentUser.doctor)
    .success((conversations) => {
      this.conversations = conversations;
      this.conversations[0].active = true;
      this.$state.go('app.conversations.detail', {id: this.conversations[0].id});
      return conversations;
    })
    .error((err) => {
      return err;
    });
  } else {
    this.ConversationService.getConversationList()
    .success((conversations) => {
      this.conversations = conversations;
      this.conversations[0].active = true;
      this.$state.go('app.conversations.detail', {id: this.conversations[0].id});
      return conversations;
    })
    .error((err) => {
      return err;
    });
  }
}
}

Am I doing something wrong ? Because the logs show me an empty array [] for this.conversations in the child scope. And after that I have an other error :

angular.js:12722 TypeError: Cannot read property 'id' of undefined
at ConversationDetailController.activate (http://localhost:3000/app/index.module.js:602:34)
at ConversationDetailController.ConversationListController (http://localhost:3000/app/index.module.js:504:11)
at new ConversationDetailController (http://localhost:3000/app/index.module.js:582:95)
at invoke (http://localhost:3000/bower_components/angular/angular.js:4535:17)
at Object.instantiate (http://localhost:3000/bower_components/angular/angular.js:4543:27)
at http://localhost:3000/bower_components/angular/angular.js:9395:28
at http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4081:28
at invokeLinkFn (http://localhost:3000/bower_components/angular/angular.js:9039:9)
at nodeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8533:11)
at compositeLinkFn (http://localhost:3000/bower_components/angular/angular.js:7929:13) <div ui-view="" layout="column" class="w-100 ng-scope">

Thanks, Gabriel

Answer 1

super($rootScope, $state, $log);

calls the parent constructor. There you have

this.activate();

Since this is an instance of ConversationDetailController its activate method is called, not that of ConversationListController . And there you have

let id = this.$stateParams.id;

But $stateParams are not set yet, because:

super($rootScope, $state, $log); <- You are here
...
this.$stateParams = $stateParams;