javascript - angularjs ui-router How to notify child pages of data changes in the parent page

Question

Parent page nested sub-page (ui-view also has ui-view inside)

The subpage is written using component, so it cannot inherit the scope of the parent page

Now the parent transfers data to the child by passing parameters $state.go('parent.child', {data: $scope.data})

But if the parent's data is modified, the child page will not know it and it will remain the same.

Is there any way to notify the data modification of the parent page to the child page, or other methods of passing parameters?

Answer 1

Parent scope$broadcastchild page can receive it, child page scope$emitparent page can receive it

Answer 2

This should be regarded as a data sharing problem between page components. The solutions I can think of are as follows:

• Borrowing the internal event mechanism of Angular, the child page subscribes to the events published by the parent page to make some changes, and vice versa.

• Implement a common service to store shared data and inject it into the components of the two pages respectively

• Use a third-party state hosting container, such as the famous redux, and use ng-redux for adaptation. The two pages change the state stored in the state container by calling action