如何使用ES6 angular 1.3控制器显示标题

How to display title with ES6 angular 1.3 controller?

本文关键字：控制器 显示 标题 何使用 ES6 angular      更新时间：2023-09-26

刚刚开始了解ES6角度控制器。我在这里借用了一些代码：http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html.

我只是想让一个简单的控制器工作并显示一个标题。这是我的控制器：

class PageController {
    constructor(title) {
        this._title = title;
    }
    title () {
        return 'Title: ' + this._title;
    }
}
export { PageController }

import { PageController } from './PageController';
class ProductPageController extends PageController {
    constructor() {
        super('ES6 inheritance with Angular');
    }
}
export { ProductPageController }

import { ProductPageController } from './ProductPageController';
angular
    .module('app', [])
    .controller('ProductPageController', ProductPageController);

如何显示标题？这是一个jsfiddle：https://jsfiddle.net/dingen2010/ma6xjbrb/12/

超类中的所有方法都可以在派生类中访问。所以您可以通过title()方法显示标题。

您应该在模板中写入以下内容

<div class="container" ng-controller="ProductPageController as ctrl">
   {{::ctrl.title()}}
</div>

以下是最新的小提琴：https://jsfiddle.net/ma6xjbrb/13/

相关文章：