Cannot access Angular scope variable from pug/HTML (yeoman angular-fullstack)

Issue

I cannot access from PUG to a variable in the controller. Please, may anybody help me?

I´m trying to access the AwesomeThings array with $ctrl.awesomeThings,
with JavaController.awesomeThings, with this.awesomeThings, with java.awesomeThings, and none
of them seem to work. The ng-repeat never creates nor an option. It seems
that the array is not being recognized.

Could you please help me guys? I´m sure i´m missing something that I do not know of the new versions of angular-fullstack + Typescript.

Thanks a lot.

The PUG file

.container
  p
    | Documentaci&oacute;n Java
  hr
  ul.nav.nav-tabs.nav-stacked.col-md-4.col-lg-4.col-sm-6
    li(ng-repeat='thing in awesomeThings') //THIS IS WHAT DOES NOT WORK
      a(ng-href='{{thing.URL}}', uib-tooltip='{{thing.nombre}}', target="_blank") {{thing.nombre}}

The Controller

'use strict';

export default class JavaController {


  awesomeThings = [{nombre:"La tecnología Java", URL: "http://www.ciberaula.com/articulo/tecnologia_java"},
      {nombre:"La Programación orientada a Objetos (VIDEO)", URL: "https://www.youtube.com/watch?v=8UgQNQML_b8"},
      {nombre:"Herencia y relaciones entre objetos", URL: "https://www.arquitecturajava.com/herencia-y-el-principio-de-substitucion-de-liskov/"},
      {nombre:"Herencia en Java", URL: "https://jarroba.com/herencia-en-la-programacion-orientada-a-objetos-ejemplo-en-java/"},
      {nombre:"Java, overrides y encapsulación", URL: "https://www.arquitecturajava.com/java-override-y-encapsulacion/"},
      {nombre:"Artuitectura de componentes y JEE (PDF)", URL: "http://ocw.uc3m.es/ingenieria-telematica/software-de-comunicaciones/transparencias/3_cmpnts-JavaEE.pdf"},
      {nombre:"Clases y medotodos", URL: "https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=426:ique-es-una-clase-java-concepto-atributos-propiedades-o-campos-constructor-y-metodos-cu00623b&catid=68&Itemid=188"},
      {nombre:"Glosario de conceptos", URL: "https://www.java.com/es/download/faq/helpful_concepts.xml"},
      {nombre:"Arquitecturas MVC/REST", URL: "https://www.youtube.com/watch?v=qyt2Ct0hWqU"},
      {nombre:"POJO, DTO, JavaBeans", URL: "https://www.youtube.com/watch?v=Iy7je1tJ20Y"},
      {nombre:"CURSO JAVA DESDE CERO (lista de videos)", URL: "https://www.youtube.com/playlist?list=PLU8oAlHdN5BktAXdEVCLUYzvDyqRQJ2lk"},
      {nombre:"MAVEN, Qué es", URL: "http://www.javiergarzas.com/2014/06/maven-en-10-min.html"},
      {nombre:"Qué es JUnit", URL: "https://mikiorbe.wordpress.com/2009/10/23/junit-herramienta-indispensable-para-el-desarrollo-java"},
      {nombre:"Qué es JavaDocs", URL: "http://java-white-box.blogspot.com.es/2012/08/javadoc-que-es-el-javadoc-como-utilizar.html"},
      {nombre:"Arquitectura Java - Básico (VIDEO)", URL: "http://java-white-box.blogspot.com.es/2012/08/javadoc-que-es-el-javadoc-como-utilizar.html"},
      {nombre:"Arquitectura Java - La máquina virtual Java", URL: "https://cursos.arquitecturajava.com/courses/programacion-orientada-a-objeto-en-java/lectures/2857884http://cursos.arquitecturajava.com/courses/programacion-orientada-a-objeto-en-java/lectures/2857884"},
      {nombre:"Arquitectura Java - Clases y objetos", URL: "https://cursos.arquitecturajava.com/courses/programacion-orientada-a-objeto-en-java/lectures/2863618"}
      ];



  /*@ngInject*/
  constructor() {

      console.log(this.awesomeThings);
  }

}

The Index.ts for my controller

'use strict';
const angular = require('angular');
import routes from './java.routes';
import JavaController from './java.controller';

export default angular.module('homeCalidadApp.java', [
      'homeCalidadApp.auth',
      'ui.router'
    ])
  .config(routes)
  .controller('JavaController', JavaController)
  .name;

Solution

After some research, I finally found what was the trouble and the solution:

The controller must be identified by controllerAs method. Then, after
identifying the controllerAs name, you will be able to access to it.

If you use, for example, controllerAs(“pp”), the value in the pug file will be {{pp.value}}

Here is the link with the info. Check @jasonals comment on 12 Oct
2013

The PUG file:

.container
  p
    | Documentaci&oacute;n Java
  hr 
  ul.nav.nav-tabs.nav-stacked.col-md-4.col-lg-4.col-sm-6
    li(ng-repeat='thing in ctrl.awesomeThings') //CHECK HERE. The right value is CTRL.awesomeThings
      a( ng-href='{{thing.URL}}', uib-tooltip='{{thing.nombre}}', target="_blank") {{thing.nombre}}

The route

export default function routes($stateProvider) {
  'ngInject';
  $stateProvider
  .state('java', {
      url: '/java',
      template: require('./java.pug'),
      controller: 'JavaController as ctrl'
    }); 
};

The Controller

export default class JavaController {
    $http;
  awesomeThings = [{nombre:"La tecnología Java", URL: "http://www.ciberaula.com/articulo/tecnologia_java"},
      {nombre:"La Programación orientada a Objetos (VIDEO)", URL: "https://www.youtube.com/watch?v=8UgQNQML_b8"},
      {nombre:"Herencia y relaciones entre objetos", URL: "https://www.arquitecturajava.com/herencia-y-el-principio-de-substitucion-de-liskov/"},
      {nombre:"Herencia en Java", URL: "https://jarroba.com/herencia-en-la-programacion-orientada-a-objetos-ejemplo-en-java/"},
      {nombre:"Java, overrides y encapsulación", URL: "https://www.arquitecturajava.com/java-override-y-encapsulacion/"},
      {nombre:"Artuitectura de componentes y JEE (PDF)", URL: "http://ocw.uc3m.es/ingenieria-telematica/software-de-comunicaciones/transparencias/3_cmpnts-JavaEE.pdf"},
      {nombre:"Clases y medotodos", URL: "https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=426:ique-es-una-clase-java-concepto-atributos-propiedades-o-campos-constructor-y-metodos-cu00623b&catid=68&Itemid=188"},
      {nombre:"Glosario de conceptos", URL: "https://www.java.com/es/download/faq/helpful_concepts.xml"},
      {nombre:"Arquitecturas MVC/REST", URL: "https://www.youtube.com/watch?v=qyt2Ct0hWqU"},
      {nombre:"POJO, DTO, JavaBeans", URL: "https://www.youtube.com/watch?v=Iy7je1tJ20Y"},
      {nombre:"CURSO JAVA DESDE CERO (lista de videos)", URL: "https://www.youtube.com/playlist?list=PLU8oAlHdN5BktAXdEVCLUYzvDyqRQJ2lk"},
      {nombre:"MAVEN, Qué es", URL: "http://www.javiergarzas.com/2014/06/maven-en-10-min.html"},
      {nombre:"Qué es JUnit", URL: "https://mikiorbe.wordpress.com/2009/10/23/junit-herramienta-indispensable-para-el-desarrollo-java"},
      {nombre:"Qué es JavaDocs", URL: "http://java-white-box.blogspot.com.es/2012/08/javadoc-que-es-el-javadoc-como-utilizar.html"},
      {nombre:"Arquitectura Java - Básico (VIDEO)", URL: "http://java-white-box.blogspot.com.es/2012/08/javadoc-que-es-el-javadoc-como-utilizar.html"},
      {nombre:"Arquitectura Java - La máquina virtual Java", URL: "https://cursos.arquitecturajava.com/courses/programacion-orientada-a-objeto-en-java/lectures/2857884http://cursos.arquitecturajava.com/courses/programacion-orientada-a-objeto-en-java/lectures/2857884"},
      {nombre:"Arquitectura Java - Clases y objetos", URL: "https://cursos.arquitecturajava.com/courses/programacion-orientada-a-objeto-en-java/lectures/2863618"}
      ];
    /*@ngInject*/
    constructor($http, $scope, socket) {
      this.$http = $http;
      //this.socket = socket;
      $scope.awesomeThings = this.awesomeThings;
    }
}

Answered By – Alejandro Teixeira Muñoz

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Issue

Solution

Leave a Reply Cancel reply