Cant access to nav controller

Ionic Framework ionic-v3
1

hi guys why nav controllers not working on this function , how to fix it ?

let classname = document.getElementsByClassName("product-image");

 function myFunction() {
    var attribute = this.getAttribute("class");
    var product_id= attribute.match(/\b\d*/);
    this.navCtrl.push(ProductDetailPage,{id: product_id})
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}
2

Are you importing the navCtrl?
If so, is it in your constructor?

If I’m right access to the navCtrl should work after you import it and add it to your constructor.

Regards,
Neonic1

3

yeah i imported module, nav controller working on other function but not working this place

i user ionic 2 ts

4

on this function (my function) i cant access to any module


 checkNewMessage(){

this.agornaApi.checkNewMessage(this.user.authentication_token,this.navParams.data.id,this.messages[this.messages.length-1].id).then(data => {
        this.arr= data;
        if(this.arr.length > 0){

          for (var i = 0; i < this.arr.length; i++) {

  this.messages.push({
   id: this.arr[i].id,
   user_id: this.arr[i].user_id,
   message: this.arr[i].message,
   time: this.arr[i].time
   })

          }


        }

       
        
        console.log(this.arr)
         this.loading.dismiss();
      }, (err) => {
 this.toastCtrl.create({
          message: 'اشکال در برقراری ارتباط با سرور',
          duration: 3000,
          position: 'bottom'
        }).present();




        });



let classname = document.getElementsByClassName("product-image");

 function myFunction() {
    var attribute = this.getAttribute("class");
    var product_id= attribute.match(/\b\d*/);
    this.navCtrl.push(ProductDetailPage,{id: product_id})
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}





}
5

Hm, do you get any errors?
Make sure your imports are in the correct directories (if you have to go back one root …/);

try these:
• Try making the navCtrl public
• Try putting your code inside the constructor
• Try adding your custom page/etc to the app.modules.ts and/or app.componets.ts

Cause it seems like you’re not inside somewhere to be granted access so it’s being thrown “undefined”.

Regards,
Neonic1

6

Pretty much everything about this code sample is completely unidiomatic. You should not be directly interacting with the DOM this way in an Angular application - use property and event bindings instead. If you can describe in larger terms what you are really trying to do, perhaps we can help you rewrite it in a more natural way.

That being said, the proximate answer to your question is that you cannot rely on execution context (aka what ‘this’ means) in a function you declare using function, which is why I recommend always using a lambda or arrow function instead.

2 Likes
7

i told to you i can access to nav controller on other function but i cant access to nav controller on this function

let classname = document.getElementsByClassName("product-image");

 function myFunction() {
    var attribute = this.getAttribute("class");
    var product_id= attribute.match(/\b\d*/);
    this.navCtrl.push(ProductDetailPage,{id: product_id})
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}
8

i read a html attribute on Json api ( you can see message attribute on this path https://pinsood.com/api/v1/conversation/5usXUCnYM3jQsRYTjHS-.json?id=6)

and i parse message attribute to view( with innerHtml attribute) , i want when user clicked on image go to ProductDetailPage all code is works fine but nav controller not working on DOM :frowning:

what is your suggestion ?

9

Why aren’t you just using the (click) event on your elements?

10

because this images loaded by json api and i cant use directives and any angular attributes ,
you can see message attribute on this path https://pinsood.com/api/v1/conversation/5usXUCnYM3jQsRYTjHS-.json?id=6

11

works fine :grinning:

 checkNewMessage(){

this.agornaApi.checkNewMessage(this.user.authentication_token,this.navParams.data.id,this.messages[this.messages.length-1].id).then(data => {
        this.arr= data;
        if(this.arr.length > 0){

          for (var i = 0; i < this.arr.length; i++) {

  this.messages.push({
   id: this.arr[i].id,
   user_id: this.arr[i].user_id,
   message: this.arr[i].message,
   time: this.arr[i].time
   })

          }
        }
        
        console.log(this.arr)
         this.loading.dismiss();
      }, (err) => {
 this.toastCtrl.create({
          message: 'اشکال در برقراری ارتباط با سرور',
          duration: 3000,
          position: 'bottom'
        }).present();

        });

  let classname = document.getElementsByClassName("product-image");

for (var i = 0; i < classname.length; i++) {
    // classname[i].addEventListener('click', myFunction, false);
    classname[i].addEventListener(`click`, (evt) => this.gtp(evt));
}

}
gtp(event){

  var target = event.target || event.srcElement || event.currentTarget;
  var classname=target.attributes.class.nodeValue;
  var product_id= classname.match(/\b\d*/);
  this.navCtrl.push(ProductDetailPage,{id: product_id})
}
12

Ok. Just trying to help… :expressionless:

1 Like