In my page controller at some point i need to update the UI, and it appears that a call to chageDetector.detectChanges() in mandatory at that particular point.
What happens is: i'm re-assigning a string property in my model whose value changes some of my UI.
As soon as i call the detectChanges() method, that property acquires its old value.
I'll only change names and values to my code, but apart from that, the following is what i'm working with:
First of all i have an enum:
enum TypeEnum { TypeA: 'A', TypeB: 'B' }
Then my controller:
selectType(type: TypeEnum) { //type has value 'B'
this.verify = true;
this.setFieldXOnTypeChange(type);
//this.model.type has value 'A'
this.model.type = type; //this.model.type = 'B'
//now this.model.type has value 'B'
//other stuff is calculated
this.scrollToBottom();
this.onFieldYReturn(null, true, true);
this.typeAccordionHeader.value = type;
if (type == typeEnum.TypeB) {
this.model.date = this.today;
}
this.setPageTitleForType(type);
//before call > this.model.type: 'B'
this.changeDetector.detectChanges();
// after call > this.model.type: 'A'
}
This is a behaviour i never experienced before: i knew changeDetector purpose was to apply model changes to the component, nothing else.
Can anyone explain the behaviour and, in case, how to avoid it?
Thanks in advance!
Related
I am trying to understand the value of this at different points in a script. Questions similar to mine have been answered in this forum but those answers are considerably above my current learning level.
In my code experiments, I am using console.logs to return the this value. The value returned is always as expected, but the format of the returned value is inconsistent, which leads me to wonder why.
This code returns the expected Window object for the first 3 log commands to be executed but returns only the object literal for the 4th command, executed from the object's method.
var myName = {
name: "James",
sayName: function() {
console.log(this, 4);
console.log(this.name)
}
}
console.log(this, 1);
function myFunction() {
console.log(this, 2);
function nestFunction() {
console.log(this, 3);
myName.sayName();
}
nestFunction();
}
myFunction();
I have 3 questions: Why doesn't console.log return the name of the object? Is there a way to make it do so? Is there a simple way to do that other than console.log? Any help would be appreciated.
Ok I was going through your code to see what you specifically mean
here is the short explanation as to why THIS is different in some of the places
This keyword refers to the object it belongs to. Generally you used it to refer to the global window object .That's what is reflecting in your console log 1,2,3 .
Calling this in static javaScript object will return the javaScript object ,not the window object that is what is reflecting in the console.log(this,4).
So it gives you a way to call elements inside a static object .
Another way to understand this keyword is to look at constructors .The best example of the keyword
this
is inside a constructor function
var myObj = function(){
function myObj(ref)
{
this.name = "";
this.Item = "";
this.ref = ref;
this.speak();
}
myObj.prototype.speak =function()
{
this.name = 'James';
this.item = 'cheese';
console.log(this.ref)
//and the constuctor object
console.log(this)
}
return myObj;
}();
var e = new myObj('a Refrence string');
This should give you a basic understanding of how this works
here is more info to get you started Wschools.com
When using attribute binding in components, the data passed to the controller is always a string. I'm trying to pass an integer, however, and am having trouble converting it from a string and having the conversion stick.
I've tried saving the data as an integer in $onInit() but outside of this function, the data returns to its original state (type and value). I understand that components should not modify the data passed in as a general rule, but since this is an attribute binding, and the data is passed by value, I didn't think that applied.
function IntegerBindingController() {
this.$onInit = function() {
// Assuming 'number="2"' in the HTML
// This only changes the data inside this function
this.number = parseInt(this.number)
this.typeofNumber = typeof this.number // evaluates to 'number'
this.simpleAdd = this.number + 5 // evaluates to 7
this.dataAdd = this.numberOneWay + 5
console.log(this)
}
this.test = function() {
// this.number is a string inside this function
this.typeofNumber = typeof this.number // evaluates to 'string'
this.simpleAdd = this.number + 5 // evaluates to 25
}
}
I can solve this by copying the data to a new property on the controller, but I'm curious if someone can explain what's happening here. See this Plunker for a working example of the issue.
Passing number with '#' will always pass it as a string. If you want the object value pass number with '=' instead in the components bindings.
So:
var IntegerBindingComponent = {
controller: IntegerBindingController,
bindings: {
string: '#',
number: '=',
numberOneWay: '<'
},
template: _template
}
A decent explanation can be found here: http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
or here: Need some examples of binding attributes in custom AngularJS tags
"The '=' notation basically provides a mechanism for passing an object into your directive. It always pulls this from the parent scope of the directive..."
The solution I ended up going with was to use $onChanges to handle the bound data values. In my case, at least one of the values could potentially change after an async call in the parent component, so this made sense overall. As Prinay Panday notes above, the # binding always comes through as a string. The $onInit() method guarantees that bindings will be available, but it doesn't guarantee that they will change, so even if you change the value on the component, Angular can change it later. That's another reason why the documentation recommends copying the bound values to a local variable if you need to manipulate them at all. As for the $onChanges() solution, it would look like this
function IntegerBindingController() {
this.$onChanges(changes) {
if (changes.number && changes.number.currentValue) {
this.number = parseInt(changes.number.currentValue)
}
}
this.test = function() {
this.typeofNumber = typeof this.number // evaluates to 'number'
this.simpleAdd = this.number + 5 // evaluates to 7 (assuming this.number was 2)
}
}
I have a register read sequence that goes something like this:
extend vr_ad_sequence_kind: [READ_REG];
extend READ_REG vr_ad_sequence {
// register to read
reg_kind : vr_ad_reg_kind;
!reg : vr_ad_reg;
// more fields no longer shown here
body() #driver.clock is {
var reg_item : vr_ad_reg; // reg_item gets a value from a
// method that returns the correct
// register instance from the addr_map,
// which I no longer want to show here
reg = new vr_ad_reg with { .kind = reg_kind; };
read_reg { .static_item == reg_item; } reg;
};
};
Now, I have a virtual sequence that does the vr_ad_sequence above:
extend MAIN MAIN_TEST sample_vseq {
!reg_read : READ_REG vr_ad_sequence;
body() #driver.clock is first {
do reg_read keeping {
.driver == driver.reg_driver;
.reg_kind == MY_REGISTER;
};
// how to get the value of MY_REGISTER.MY_FIELD from
// the reg_read sequence above?
};
};
My main objective is to read the value of a specific register bit field which is MY_FIELD in the above example. Is there a way to do it without modifying anything in the original READ_REG vr_ad_sequence? If it can't be helped, how do I make the READ_REG vr_ad_sequence return the read value to the calling sample_vseq?
Thanks very much in advance.
To obtain the register value after the read you first must make sure that the read is finished on the bus. So either your BFM is blocking (which often it isn't) or you add a flag to the sequence that tells whether the response has been received (this can be set from the BFM/driver).
Next, you can get the value from the vr_ad_map instance.
E.g.
body() #driver.clock is first {
do reg_read keeping {
.driver == driver.reg_driver;
.reg_kind == MY_REGISTER;
};
// Wait for read response
sync true(reg_read != NULL and reg_read.done);
// Access shadow register through pointer to vr_ad_map instance
print addr_map.get_register_by_kind(MY_REGISTER).as_a(MY_REGISTER vr_ad_reg).MY_FIELD;
};
(I can't check the syntax right now)
how can i check if any javaScript object's property exists and if it exists then it has a valid value?
actually,i am a beginner and trying to solve this-
Check if the second argument is truthy on all objects of the first argument(which is an array of objects).i.e.
check if the second argument exists in all the objects in first argument(an array) as a property.
if it exists, it should not be-
invalid, as age can't be 0
null
undefined
empty string('')
NaN
till now i have this-
function truthCheck(collection, pre) {
for(var i=0;i<collection.length;i++){
if(!(pre in collection[i])||collection[i]
[pre]===undefined||isNaN(collection[i]
[pre])||collection[i][pre]===""||
collection[i][pre]===null||collection[i]
[pre]===0)
{
return false;
}
}
return true;
}
i know this is not the best wayto solve .Is there a better way to do this?i don't like that long if statement in my code.i have seen other SO links-link1,link2 but none of them seemed to solve my query. any kind of help is highly appreciated.
P.S. this code is not working for some true cases even.
o = new Object();
o.prop = 'exist';
if(o.hasOwnProperty('prop')){
if(o['prop']){
alert('good value')
}
}
https://stackoverflow.com/a/6003920/1074179
this is what i was looking for and absolutely logical-
for(var i in array){
if((prop in array[i])&& Boolean(array[i][prop]))
{
//do something
}
}
the Boolean() function is something which made my day. Learn more at this link.
Look at the below example.
let the json object be
var a = { obj1:"a",obj2:"b"}
to check if an object exists,you can use hasOwnProperty() method.
a.hasOwnProperty("obj2") //this will return true
a.hasOwnProperty("obj3") // this will return false
to check the value of an object
if(a["obj1"] && a["obj1"]!="" && a["obj"]!=0){
//place your logic here
}
I have an edit page where the user can edit a file in the system, and then save it. When loading the file, I make two objects out of the result, one is bound to the view and the other I wish to keep (in its original state) until "save" is clicked, and then use it to compare vs the view-bound object, to see if any changes have been made.
So, when the page loads, this is being run
$http.get('/api/files/' + $stateParams.id)
.then(function (result) {
vm.fileTemp = result.data;
vm.fileTempCopy = result.data;
The fileTempCopy is not being touched or referenced by anything in the view or elsewhere in the controller, except in the save-method, where i check if they are alike or not. But somehow, both of them are updated when i make changes to the input fields (as if they were both used as ng-model for the inputs).
if(vm.fileTemp === vm.fileTempCopy)//in save-function
is always true, and their fields are exactly the same.
Why does this happen and how can I solve it?
Using the assignment operator, you are actually just referencing the original array. Arrays are reference types. That means, that they don't actually store values, they only store references to those values. What you where doing is copying a reference to a memory location, meaning that any changes to the memory at that location (including removing elements) will be reflected in both arrays.
So you will want to do this instead:
vm.fileTemp = angular.copy(result.data);
vm.fileTempCopy = angular.copy(result.data);
here is a very basic approach to checking an object's "value equality".
function isEquivalent(a, b) {
// Create arrays of property names
var aProps = Object.getOwnPropertyNames(a);
var bProps = Object.getOwnPropertyNames(b);
// If number of properties is different,
// objects are not equivalent
if (aProps.length != bProps.length) {
return false;
}
for (var i = 0; i < aProps.length; i++) {
var propName = aProps[i];
// If values of same property are not equal,
// objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
}
// If we made it this far, objects
// are considered equivalent
return true;
}
//After your update Outputs: false
console.log(isEquivalent(vm.fileTemp, vm.fileTempCopy));