Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

component communication and triggers #90

Open
tech-no-logical opened this issue Jul 13, 2016 · 4 comments
Open

component communication and triggers #90

tech-no-logical opened this issue Jul 13, 2016 · 4 comments

Comments

@tech-no-logical
Copy link

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
Copy link
Author

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

@toddmotto
Copy link
Owner

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 notifications@github.com 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
#90, or mute the
thread
https://github.com/notifications/unsubscribe/ABlEoBVe2PpeimFqfGgVnepYahdKyLEDks5qVNj3gaJpZM4JLXDx
.

@toddmotto

@tech-no-logical
Copy link
Author

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants