CODEWITHSUNDEEP
dartangular-dart
smallg
smallg

Reputation: 216

How to update parent controller variables in child controller

In parent controller, like this:

@NgController(
  selector: '[main-ctrl]',
  publishAs: 'ctrl')
class MainController {
  Scope scope;
  bool showHeaderFooter=false;
}

In child controller, how to update showHeaderFooter variable?

@NgController(
selector: '[login-ctrl]',
publishAs: 'login')
class LoginController {
  Scope scope;
  NgRoutingHelper routingHelper;
  var username, pwd;

  LoginController(this.routingHelper,this.scope);

  void login(){
    if(username!=null&&pwd!=null){
      routingHelper.router.go('welcome', {});
      scope.parentScope.showHeaderFooter=true;
    }
  }
}

this code can not working.

Upvotes: 1

Views: 325

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657268

There are a few possibilities.

  • Access the parent using scope.context

    1. In MainController you assign the instance of MainController to a named attribute in its scope when it is created (in its constructor)
    2. You get access to the parent scope using from LoginController by scope.parentScope and then the attribute where the instance is assigned to.

  • Events using emit, assigning the MainCntroller to a scope attribute, then you can access it with 

@NgController(
  selector: '[main-ctrl]',
  publishAs: 'ctrl')
class MainController {
  Scope scope;
  bool showHeaderFooter=false;
  MainController(this.scope) {

    // approach using emit
    scope.on('login').listen((e) => showHeaderFooter = e.data);

    // approach using scope.context
    scope.context['mainCtrl'] = this;

    // just for demonstration
    new Timer.periodic(new Duration(seconds: 1), (e) => print(showHeaderFooter));
  }

}

@NgController(
selector: '[login-ctrl]',
publishAs: 'login')
class LoginController {
  Scope scope;
  NgRoutingHelper routingHelper;
  var username, pwd;

  LoginController(this.routingHelper,this.scope);

  void login(){
//    if(username!=null&&pwd!=null){
      //routingHelper.router.go('welcome', {});

      // approach using emit
      scope.emit('login', true);

      // approach using scope.context
      (scope.parentScope.context['mainCtrl'] as MainController).showHeaderFooter=true;
//    }
  }
}

or if you MainController has an unique publishAs and a @NgTwoWay('showHeaderFooter') annotation you can just create a binding.

Upvotes: 1

Related Questions