无法从 pug/HTML 访问 Angular 范围变量（yeoman angular-fullstack）

Question

我无法从 PUG 访问控制器中的变量。拜托，有人可以帮助我吗？

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.

你们能帮帮我吗？我确定我遗漏了一些我不知道的 angular-fullstack + Typescript 新版本的东西。

非常感谢。

PUG 文件

.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}}

控制者

'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);
  }

}

我的控制器Index.ts

'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;

Answer 1

经过一番研究，我终于找到了问题所在和解决方案：

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

例如，如果您使用 controllerAs("pp")，则 pug 文件中的值将为 {{pp.value}}

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

PUG 文件：

.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}}

路线

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

控制器

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;
    }
}

无法从 pug/HTML 访问 Angular 范围变量（yeoman angular-fullstack）

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

angularjs

typescript

angularjs-ng-repeat

pug

angular-fullstack