AngularJS components $onChanges is getting fired only when assign new val, rather than make a change
0
I have this:
// child component
this.$onChanges = () => {
console.log(this.test);
}
// parent component
$scope.test = {
team: "barcelona"
};
// parent component html
<my-component test="test"></my-component>
// parent component
$timeout(() => {
$scope.test.team = "Real madrid"; // NOT fire the $onChanges!
$scope.test = {
team: "Real madrid";
} // DOES fire the $onChanges!
}, 2000);
As you can see, components $onChanges function is fired only when assigning value, rather than just updating.
What to do with this?
javascript angularjs components onchange
asked Nov 14 '18 at 19:58
RazRaz
276112
add a comment |
0
I have this:
// child component
this.$onChanges = () => {
console.log(this.test);
}
// parent component
$scope.test = {
team: "barcelona"
};
// parent component html
<my-component test="test"></my-component>
// parent component
$timeout(() => {
$scope.test.team = "Real madrid"; // NOT fire the $onChanges!
$scope.test = {
team: "Real madrid";
} // DOES fire the $onChanges!
}, 2000);
As you can see, components $onChanges function is fired only when assigning value, rather than just updating.
What to do with this?
javascript angularjs components onchange
asked Nov 14 '18 at 19:58
RazRaz
276112
On your timeout block you are first updating the team varibale on your test object. Which just updates the value and does not fire any trigger placed on scope. But when you call this creates a new object so change event fires. You should put you change event on onject level to watch the changes on objects, not on the scope level
– Utku Apaydin
Nov 15 '18 at 4:58
Can you answer it with a code please, since I didn't understand you.onject level to watchwhat that means?
– Raz
Nov 15 '18 at 6:08
1
this.test.$onChanges = () => {}need to change event on object level not on the scope level (as @UtkuApaydin said)
– Jean-Philippe Bergeron
Nov 15 '18 at 19:58
@Jean-PhilippeBergeron ty :)
– Utku Apaydin
Nov 16 '18 at 7:02
Each attribute I should wrap with this.MYATTR.$onChanges ?
– Raz
Nov 16 '18 at 9:51
add a comment |
0
0
0
I have this:
// child component
this.$onChanges = () => {
console.log(this.test);
}
// parent component
$scope.test = {
team: "barcelona"
};
// parent component html
<my-component test="test"></my-component>
// parent component
$timeout(() => {
$scope.test.team = "Real madrid"; // NOT fire the $onChanges!
$scope.test = {
team: "Real madrid";
} // DOES fire the $onChanges!
}, 2000);
As you can see, components $onChanges function is fired only when assigning value, rather than just updating.
What to do with this?
javascript angularjs components onchange
asked Nov 14 '18 at 19:58
RazRaz
276112
I have this:
// child component
this.$onChanges = () => {
console.log(this.test);
}
// parent component
$scope.test = {
team: "barcelona"
};
// parent component html
<my-component test="test"></my-component>
// parent component
$timeout(() => {
$scope.test.team = "Real madrid"; // NOT fire the $onChanges!
$scope.test = {
team: "Real madrid";
} // DOES fire the $onChanges!
}, 2000);
As you can see, components $onChanges function is fired only when assigning value, rather than just updating.
What to do with this?
javascript angularjs components onchange
javascript angularjs components onchange
asked Nov 14 '18 at 19:58
RazRaz
276112
asked Nov 14 '18 at 19:58
RazRaz
276112
asked Nov 14 '18 at 19:58
RazRaz
276112
asked Nov 14 '18 at 19:58
RazRaz
276112
asked Nov 14 '18 at 19:58
RazRaz
276112
276112
On your timeout block you are first updating the team varibale on your test object. Which just updates the value and does not fire any trigger placed on scope. But when you call this creates a new object so change event fires. You should put you change event on onject level to watch the changes on objects, not on the scope level
– Utku Apaydin
Nov 15 '18 at 4:58
Can you answer it with a code please, since I didn't understand you.onject level to watchwhat that means?
– Raz
Nov 15 '18 at 6:08
1
this.test.$onChanges = () => {}need to change event on object level not on the scope level (as @UtkuApaydin said)
– Jean-Philippe Bergeron
Nov 15 '18 at 19:58
@Jean-PhilippeBergeron ty :)
– Utku Apaydin
Nov 16 '18 at 7:02
Each attribute I should wrap with this.MYATTR.$onChanges ?
– Raz
Nov 16 '18 at 9:51
add a comment |
On your timeout block you are first updating the team varibale on your test object. Which just updates the value and does not fire any trigger placed on scope. But when you call this creates a new object so change event fires. You should put you change event on onject level to watch the changes on objects, not on the scope level
– Utku Apaydin
Nov 15 '18 at 4:58
Can you answer it with a code please, since I didn't understand you.onject level to watchwhat that means?
– Raz
Nov 15 '18 at 6:08
1
this.test.$onChanges = () => {}need to change event on object level not on the scope level (as @UtkuApaydin said)
– Jean-Philippe Bergeron
Nov 15 '18 at 19:58
@Jean-PhilippeBergeron ty :)
– Utku Apaydin
Nov 16 '18 at 7:02
Each attribute I should wrap with this.MYATTR.$onChanges ?
– Raz
Nov 16 '18 at 9:51
On your timeout block you are first updating the team varibale on your test object. Which just updates the value and does not fire any trigger placed on scope. But when you call this creates a new object so change event fires. You should put you change event on onject level to watch the changes on objects, not on the scope level
– Utku Apaydin
Nov 15 '18 at 4:58
On your timeout block you are first updating the team varibale on your test object. Which just updates the value and does not fire any trigger placed on scope. But when you call this creates a new object so change event fires. You should put you change event on onject level to watch the changes on objects, not on the scope level
– Utku Apaydin
Nov 15 '18 at 4:58
Can you answer it with a code please, since I didn't understand you.
onject level to watch what that means?– Raz
Nov 15 '18 at 6:08
Can you answer it with a code please, since I didn't understand you.
onject level to watch what that means?– Raz
Nov 15 '18 at 6:08
1
1
this.test.$onChanges = () => {} need to change event on object level not on the scope level (as @UtkuApaydin said)– Jean-Philippe Bergeron
Nov 15 '18 at 19:58
this.test.$onChanges = () => {} need to change event on object level not on the scope level (as @UtkuApaydin said)– Jean-Philippe Bergeron
Nov 15 '18 at 19:58
@Jean-PhilippeBergeron ty :)
– Utku Apaydin
Nov 16 '18 at 7:02
@Jean-PhilippeBergeron ty :)
– Utku Apaydin
Nov 16 '18 at 7:02
Each attribute I should wrap with this.MYATTR.$onChanges ?
– Raz
Nov 16 '18 at 9:51
Each attribute I should wrap with this.MYATTR.$onChanges ?
– Raz
Nov 16 '18 at 9:51
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307898%2fangularjs-components-onchanges-is-getting-fired-only-when-assign-new-val-rathe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53307898%2fangularjs-components-onchanges-is-getting-fired-only-when-assign-new-val-rathe%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
On your timeout block you are first updating the team varibale on your test object. Which just updates the value and does not fire any trigger placed on scope. But when you call this creates a new object so change event fires. You should put you change event on onject level to watch the changes on objects, not on the scope level
– Utku Apaydin
Nov 15 '18 at 4:58
Can you answer it with a code please, since I didn't understand you.
onject level to watchwhat that means?– Raz
Nov 15 '18 at 6:08
1
this.test.$onChanges = () => {}need to change event on object level not on the scope level (as @UtkuApaydin said)– Jean-Philippe Bergeron
Nov 15 '18 at 19:58
@Jean-PhilippeBergeron ty :)
– Utku Apaydin
Nov 16 '18 at 7:02
Each attribute I should wrap with this.MYATTR.$onChanges ?
– Raz
Nov 16 '18 at 9:51