change controller property from another controller

Question

I have an application that has a Navigation bar that I have put in "Application" context. By default, these Navigation bar links will be disabled and will be enabled only on a particular action from template.

The Application controller that contains the disabled status of the link in Nav Bar:-

App.ApplicationController = Ember.Controller.extend({
userName:"TestUser",
firstLinkDisabled:true,
actions:{
    handleToggle:function(){
        console.log("Handling application action with linkstatus="+this.firstLinkDisabled);
        //this.set("firstLinkDisabled",false);
        this.toggleProperty("firstLinkDisabled");
    }
}

})

The Index Controller that will send the action to Application Controller:-

App.IndexController = Ember.Controller.extend({
actions:{
    toggleApplicationButton:function(){
        this.controllerFor("Application").send("handleToggle");
    }
}

})

Application Template:

    <script type="text/x-handlebars">
    

    {{#link-to 'first' disabled=firstLinkDisabled}}First link in application{{/link-to}}


    <button {{action 'handleToggle'}}>Toggle Application Menu </button>
    
    {{outlet}}
    </script>

Index Template

<script type="text/x-handlebars" id="index">
<button {{action 'toggleApplicationButton'}}>Toggle Application Menu </button>
</script>

When I click on "Toggle Application Menu" button I get the following output in console.

Console Output

But in Ember inspector the property "firstLinkDisabled" doesn't change. Image of Ember Inspector:- Ember Inspector Image

The link remains disabled.

What am I doing wrong here?
Doesn't ember allow to change the property of other controller?
How to make this thing work?

Answer 1

Here is a simple example from my project:

import Ember from 'ember';

export default Ember.Controller.extend({
  /*first, inject a controller*/
  loginController: Ember.inject.controller('lang.login'),
  /*some code*/

  actions: {
    register: function () {
      /*some code*/
      /*work with injected controller*/
      var c = this.get('loginController');
      c.set('identification', that.get('user').email);
      c.set('password', that.get('user').plainPassword);
      /*some code*/
    }
  }
});

ember docs

Answer 2

Use Ember.inject.controller()

App.IndexController = Ember.Controller.extend({
  appController: Ember.inject.controller("Application"),
  actions:{
    toggleApplicationButton:function(){
        this.get("appController").send('handleToggle');
    }
  }  
})

controllerFor you can use in the Routes

Also you can use the alias

appController: Ember.computed.alias('controllers.Application')

Refer Emberjs official documentation for detail

Answer 3

First, inject the application controller into the index controller

//index.js
application: Ember.inject.controller(),

Then you can access the property in the application controller like this:

//index.js
application.toggleProperty("firstLinkDisabled");