component communication and triggers
I'm trying to follow your guide, but am running into an issue. in pre-1.5 angular, I used a lot of services as singletons to communicate between components regardless of their (parent-child) relationship.
so suppse I have two controllers accessing the same service's variable (by reference). if either one changes it, it's automatically synched. but the controller on the receiving end needs a trigger to do something when that change occurrs. in the olden day's we could $watch, or $broadcast/$emit.
in this new post 1.5 world, I'm stuck as to how to achieve that. I've set up a plunk sort of illustrating my intentions at
http://plnkr.co/edit/cn8WI3?p=preview
(see the comment in todo.controller.js)
thanks !
to add : even if using
bindings : { todo: '<' }
to the definition of the todo-component, $onChanges fails to trigger when the todo is changed via the service's reference...
I don't have the ability to code it up right now as I'm on a train using the wifi but essentially what you want is a delegated function to the component that needs to tell the other one something's changed.
Root level
- renders
and - Use
- Use
- In the
controller, have the foo/bar functions, and pass them into each component - Pass the data down via a prop
etc.
Other component:
- use bindings: { prop: '<', bar: '&' } to grab the data, and when you
want to change that data, call a function inside the component, and inside
that function, make sure you call
this.barwhich would give you the's controller function as a binding. Once that function is called with the data, the component now has it, so you can re-bind it to the parent and the one-way dataflow $$watchers will pick it up, calling $onChanges in the component to re-render the data, or even call this.foo() from the parent level, few options anyway. Happy to look later on today or tomorrow if you wanna chat more about getting it fixed up for you! :)
On 13 July 2016 at 13:24, tech-no-logical [email protected] wrote:
I'm trying to follow your guide, but am running into an issue. in pre-1.5 angular, I used a lot of services as singletons to communicate between components regardless of their (parent-child) relationship.
so suppse I have two controllers accessing the same service's variable (by reference). if either one changes it, it's automatically synched. but the controller on the receiving end needs a trigger to do something when that change occurrs. in the olden day's we could $watch, or $broadcast/$emit.
in this new post 1.5 world, I'm stuck as to how to achieve that. I've set up a plunk sort of illustrating my intentions at
http://plnkr.co/edit/cn8WI3?p=preview
(see the comment in todo.controller.js)
thanks !
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/toddmotto/angular-styleguide/issues/90, or mute the thread https://github.com/notifications/unsubscribe/ABlEoBVe2PpeimFqfGgVnepYahdKyLEDks5qVNj3gaJpZM4JLXDx .
@toddmotto
I've tried to build out the plunk to incorporate your suggestions, but only got so far as the change feeding back to the app's controller. coming from old angular 1.2 code in vanilla js this all still feels very alien to me, and examples are scarce. so if you could give some code or pointers that would be greatly appreciated :)
my not so elegant plunk is now at http://plnkr.co/edit/qypzNU?p=preview
as an aside : if I understand it correctly, this will work if both components share a parent, but will soon become more difficult if the, uh, 'parental distance' increases.
from my little knowledge of angular 2, this could be solved by using observables (or is that not preferred ?). those are not (easily) available in ng1.5, but my ultimate goal is to upgrade to ng2 in the future (hence I'm following your guide). is there a workable analog solution to this, or is communicating via bindings the best solution (in both 1.5 and 2) ?