Solvedui router $onChanges does not trigger for 1-way binded resolved data

In the following example (also available in this plunker), I was expecting the $onChanges hook to be triggered when the object that is resolved for the consumer component is reassigned by the editor component but it does not. When using the modify method, the modifications are visible because 1-way binding is done by reference, but ideally, the consumer component would do a local clone of the object in the $onChanges hook so as to avoid any unwanted side-effect (like the component modifying the object).
Could someone explain me what is happening here ?
This second plunker is the same example, but using a service instead of a global variable.

let data = { name: 'initial' };

angular
.module('app', ['ui.router'])

.component('editor', {
  controller: function () {
    this.modify = (value) => { data.name = value; };
    this.replace = (value) => { data = { name: value }; };
  },
  template: `
    <input type="text" ng-model="value">
    <button ng-click="$ctrl.modify(value)"> modify object </button>
    <button ng-click="$ctrl.replace(value)"> replace object </button>
  `
})

.config(($urlRouterProvider, $stateProvider) => {
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('root', {
      url: '/',
      component: 'consumer',
      resolve: {
        myData: () => data
      }
  });
})

.component('consumer', {
  bindings: {
    myData: '<'
  },
  controller: function () {
    this.nbOnChangesCalls = 0;
    this.$onChanges = (changes) => { this.nbOnChangesCalls++; }
  },
  template: `
    <p> value : {{ $ctrl.myData.name }} (nb onChanges calls : {{ $ctrl.nbOnChangesCalls }}) </p>
  `
});

For the record, I have set up a StackOverflow question on the subject.

23 Answers

✔️Accepted Answer

I founded another, much more better solution for that issue:). Or, I think I found..

component conf:

app.component('grandChildComponent', {
  bindings: {
    name: '<',
    onEvent: '&'
  },

In ui-router conf:

.state('grandchild', {
      url: "/grandchild",
      template: '<grand-child-component name="$ctrl.nameForGrandChild" on-event="$ctrl.fireEvent()"></grand-child-component>',
    });

There is no use component: prop from newest ui-router.

There are bindings name, and onEvent. grandChild is stateless/dumb component, which get his bindings through ui-router conf in template prop in object configuration.

-onEvent binding can be fired in child stateless, and parent statefull component catch it.
-name is passed down from parent statefull to stateless child
-when binding name is changed in parent, then is changed in child also.
-$onChange() in child will be fired when binding will be changed in parent.

Other Answers:

Thanks! I thinking would be pretty cool if we could set a flag on a state or on a view to say something like rebindable: true or an option in state.go to say "rebind my resolves but do not reinitialize the component"

It seems that it is the fact that resolved bindings are 1-time binded and not 1-way binded that prevents the $onChanges hook to be invoked in the component when the resolved object is reassigned.
Should it be considered as a bug?
Would it be possible to do 1-way binding with the resolved properties?

Related Issues:

114
ui router typescript compilation errors "Cannot find name 'Promise'"
I recommend using typescript 2.0+ and adding to your tsconfig.json: This tells typescript to use the...
52
ui router RFC: Routing to Angular 1.5 .component()
Done.. options 1 2 and 4 are supported I'd like to solicit some feedback from the community about ro...
41
ui router Possibly unhandled rejection with Angular 1.5.9
1.6.0-rc.0 has the same problem and is solved via the same workaround: This error throwing ideally s...
15
ui router 1.0: Can't inject $transition$ into component's controller?
Yes this is a limitation of route to component $transition$ isn't a global service it's a locally sc...
9
ui router 1.0 URL change without changing state
@orangesoup did you try using dynamic parameters? I think it may be a good solution for you ...
8
ui router $onChanges does not trigger for 1-way binded resolved data
I founded another much more better solution for that issue:) Or I think I found. ...
3
ui router $stateChangeSuccess is fired before previous state $scope is destroyed in 0.2.16
If anyone needs it i made this little directive to globally force the old way to render on all ui-vi...
3
ui router Use Angular 1.5 components as routes
Heads up to anyone else who finds this plunkr above ☝️ it has a bug It needs to kebob the attribute ...
38
NG6 starter SyntaxError: Unexpected token import - on gulp component
Go to babel website Installation section Hello I'm trying to scaffold a component with a fresh clone...
17
material md-autocomplete: Cannot read property 'then' of undefined
That's a f ridiculous issue: isPromise = items && items.then; It makes me reconsider the experience ...
11
material layout-row with layout-wrap and percent flex widths, in Safari
@wsfuller the smaller shims above didn't work for me because of how heavily my team uses the angular...
10
material md-datepicker : calendar does not scroll automaticaly on selected date
@alanssoares Checked both the methods I found out the issue occurred inside the below method of Cale...
5
angular gridster2 How to dynamically add a component to this gridster?
I managed to get the basics of the gridster I can add dummy widgets and play around with them ...
4
laravel5 angular material starter Blank Page on fresh install
Hey @jadjoubran sorry i was caught up somewhere Thank you for your help I am getting a blank page af...
3
Angular Full Stack How to secure the api?
On the client side: You need to use the AuthHttp with class from angular2-jwt instead of the basic H...
3
material mdPanel issue after minification.
Thanks @oemmes Yep I managed to get it sorted in the service by following the correct inject structu...
3831
axios Axios catch error returns javascript error not server response
I have exactly the same environment Try this: Modify from console.log(error) to console.log(error.re...
2346
jest Bug: Watch mode on Linux causes a ENOSPC Node.js error
From my findings its not related to Jest at all On Linux (or Mac) we have a max number of system wat...
1975
react RFClarification: why is setState asynchronous?
So here’s a few thoughts This is not a complete response by any means but maybe this is still more h...
1745
react Preventing rerenders with React.memo and useContext hook.
This is working as designed There is a longer discussion about this in #14110 if you're curious ...
1400
TypeScript Quick fix for 'unions can't be used in index signatures, use a mapped object type instead'
You can do this: Though Bar has no index signature (i.e. you can't then do (obj as Bar)[value as Foo...
811
webpack Cannot assign to read only property 'exports' of object '#<Object>' (mix require and export)
The code above is ok You can mix require and export You can't mix import and module.exports. ...
778
yarn Yarn Debian key expiry date updated (EXPKEYSIG 23E7166788B63E1E)
sudo apt-key adv --refresh-keys --keyserver keyserver.ubuntu.com also works to fix this issue for ma...
727
webpack How to exclude node_modules but one
@borm: a solution: Subj as example I create some module in another folder ( /projects/MY_MODULE ) MY...
720
yarn GPG error: https://dl.yarnpkg.com/debian stable InRelease NO_PUBKEY E074D16EB6FF4DE3
Doing curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - again was enough. ...
611
react React Fire: Modernizing React DOM
I love every of these points except the className change For latest status see an update from June 5...
608
angular Angular5.x lazyLoad problem, undefined is not a function
For others that find this issue via Google as i did: I had the same problem when trying to lazy load...
595
react starter kit How to call child component method from parent?
For example you can use Refs to Components approach like so: Demo: https://jsfiddle.net/frenzzy/z9c4...
561
react How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader?
Okay here goes What Is Fast Refresh? It's a reimplementation of hot reloading with full support from...
548
svgo no such file or directory .svgo.yml
I noticed this problem with Yarn after someone had run yarn clean Deleting the .yarnclean file delet...
521
ant motion 模版代码下载下来导入到dva搭建的项目里面,启动时报错(npm start)
开启 JavaScript 就可以了 你好,我下载的Home项目引入到项目工程里面,为了方便,我全部放到了components下面,引入和基本流程没有问题。在家里的win10上面启动没有报错,在win...
516
react native gesture handler Unsupported top level event type "onGestureHandlerStateChange" dispatched
Because my navigators were created asynchronously the handler was registered too late and thus throw...
506
electron Requiring electron outside of main.js causes a TypeError
For anyone encountering this problem in the future and reading this thread Electron version: 1.3.5 O...
499
babel ReferenceError regeneratorRuntime is not defined
I had this issue using rollup with babel I just used this babel config to resolve it : ...
488
webpack nodejs 17: digital envelope routines::unsupported
workaround: Bug report What is the current behavior? Other relevant information: webpack version: 5....
474
meteor [1.4.2.1] Error: ENFILE: file table overflow
I was getting the same after an upgrade to macOS Sierra Turns out macOS have a harsh limit on number...
473
webpack TypeError: Data must be a string or a buffer
Here is a workaround to help you to find the wrong import Using the latest 2.2.0 release although th...
429
vue router how to change document.title in vue-router?
Hi thanks for filling this issue You can simply define title in route's meta I really want set title...
425
babel eslint ESLint: 2.10.0 - Parsing error: Unexpected token =
parser: babel-eslint is OK! I'm using: and getting the following error: Parsing error: Unexpected to...
425
jest Error in Async Example: ReferenceError: regeneratorRuntime is not defined
This worked for me to fix ReferenceError: regeneratorRuntime is not defined in Jest: Then in .babelr...
417
jest babel-jest does not transpile import/export in node_modules when Babel 7 is used
For the record 🐛 Bug Report I started getting the dreaded SyntaxError: Unexpected token import erro...
413
react Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
You're exporting a React element not a component Change to Alternatively at the call site change <Co...
411
react Trigger simulated input value change for React 16 (after react-dom 15.6.0 updated)?
After some research of react source code I got a hack method for react 16: NOTICE: JUST A HACK ...
408
jest "Syntax Error: Invalid or unexpected token" with .png
I had the same error and resolved it by creating a assetsTransformer.js: Then add this to your jest ...
407
jest Watch mode stopped working on macOS Sierra
I had the same issue Upgrading watchman with brew install watchman to v4.7.0 fixed it. ...
397
material ui Module not found: Can't resolve 'material-ui-icons/Menu' Martial Next
For anyone else experiencing this issue: npm install @material-ui/icons https://www.npmjs.com/packag...
391
javascript How to configure React Native (Expo) project to use AirBnB's React rules via ESLint?
This is what I do in React and React Native: Step 1 Step 2 Backup your eslintrc file in case you wan...
383
yarn ERROR: There are no scenarios; must have at least one.
You've got the wrong yarn 😄 The Yarn you're executing comes from the cmdtest package: http://manpag...
378
webpacker localIdentName option moved in css-loader configuration
I faced same issue after upading css-loader but I solved it If you check css-loader readme ...
376
react native gesture handler Execution failed for task ':react-native-gesture-handler:compileDebugJavaWithJavac'
@zmGitHub npm i jetifier npx jetify fixed it for me on rn 0.6 I am fixing a incompatibility issue re...