angularjs-styleguide icon indicating copy to clipboard operation
angularjs-styleguide copied to clipboard

component communication and triggers

Open tech-no-logical opened this issue 9 years ago • 4 comments

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 !

tech-no-logical avatar Jul 13 '16 12:07 tech-no-logical

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...

tech-no-logical avatar Jul 13 '16 12:07 tech-no-logical

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 component:

  • 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.bar which 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

toddmotto avatar Jul 13 '16 13:07 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

tech-no-logical avatar Jul 13 '16 20:07 tech-no-logical

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) ?

tech-no-logical avatar Jul 14 '16 10:07 tech-no-logical