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

Question

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

我正在尝试使用 $ctrl.awesomeThings 访问 AwesomeThings 数组， 使用 JavaController.awesomeThings、使用 this.awesomeThings、使用 java.awesomeThings 和无 其中似乎有效。 ng-repeat 永远不会创建或选项。它似乎 数组未被识别。

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

非常感谢。

PUG 文件

.container
  p
    | Documentació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

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

控制器必须通过controllerAs方法识别。然后 识别控制器名称，您将能够访问它。

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

这是带有信息的link。检查@jasonals 10 月 12 日的评论 2013

PUG 文件：

.container
  p
    | Documentació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;
    }
}