Doubt about changing variable in another Angularjs controller

Question

I have a screen composed of a side menu (controller1) and a menu at the top (controller1).

By clicking on the top menu link, the application loads information in the side menu as well as the page in a central div(controller2).

A new requirement was introduced: when clicking on a side menu option, a div must be opened inside the central div which by default is closed during startup. So I need to open it; but I’m in different controllers.

Best practice for carrying out such an operation?

Answer 1

research on UI-Router Angular.
Example:

.state('customers.edit', {
    url: '/edit/:customerId',
    views:{ '' :{ templateUrl: 'views/customers/edit.html'},
            '[email protected]':{templateUrl:'views/customers/form.html',
    controller: 'EditCustomerController as genericCustomersViewModel'}},
    controller: 'EditCustomerController as genericCustomersViewModel'}

There in the form is the name of my ui-view.

Answer 2

You need to use the event concept at the angle, through $Emit and $on. You need to use $rootScope.

$Emit sends the data and $on receives it.

In the controller you want to send data, use $Emit, you have two parameters in the function, first is the name of the event and the second is value you want to send.

$rootScope.$emit('enviarDados', 'hello world');

In the controller you want to receive data, use $on, you have two parameters in the function, first is the name of the event and the second is the return value through a callback.

$rootScope.$on('enviarDados', function(event, valor){
     $scope.nome = valor;
});

Take an example from this link

Answer 3

I managed using $broadcast