I have a screen consisting of a side menu (controller1) and a menu at the top (controller1).
By clicking on the link from the top menu, the application loads information in the side menu, as well as the page in a central div (controller2).
A new requirement has been introduced: when you click on a side menu option, a div must be opened inside the central div which by default is closed during startup. So I must open it; but I'm on different controllers.
What is the best practice for doing this?
search 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 form is the name of my ui-view.
I was able to use $ broadcast
You need to use the concept of angular events through $ emit and $ on. You need to use $ rootScope.
The $ emit is the one who sends the data and the $ on is the recipient.
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 the 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;
});
See an example in this link