代码之家 › 专栏 › 技术社区 › Varis Darasirikul

模板文件中没有ES6组件内的AngularJS 1.7数据

webpack angularjs javascript

Varis Darasirikul · 技术社区 · 6 年前

我只是用ES6类在组件和模块设置上创建了项目angularJS1.7和Webpack4。

这是我的应用程序主模块。

// Core Styles
import './styles/main.scss';

// Core Angular
import angular from 'angular';

import { AppComponent } from "./app.component";
import CommonModule from './modules/common/common.module';
import PackagesModule from './modules/packages/packages.module';
import PackagesService from "./services/packages.service";

// These all export the module name
// import ngAnimateModuleName from 'angular-animate';

const dependencies = [
    // ngAnimateModuleName
    CommonModule.name,
    PackagesModule.name
];

angular.module('app', dependencies)
    .component('appComponent', AppComponent)
    .service('PackagesService', ['$http', PackagesService]);

这是我的JS组件文件。

import './app.component.scss';

export const AppComponent = {
    template: require('./app.component.html'),
    controller: [
        'PackagesService',
        class AppController {
            constructor (PackagesService) {
                this.test = 11;
            }
    }]
};

但似乎 test 变量在模板文件中不可用。

<header-component></header-component>

<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="packages-name-box">
                <h1 class="homepage-title">Packages Name {{ test }}</h1>
                <packages-list-group pages-data="pagesPackageData"></packages-list-group>
            </div>
        </div>
    </div>
</div>

这是webpack.config中的html加载程序

{
    // HTML LOADER
    // Reference: https://github.com/webpack/raw-loader
    // Allow loading html through js
    test: /\.html$/,
    loader: 'raw-loader'
}

我错过什么了为什么 this.test 模板中是否没有显示任何内容?

谢谢你的帮助!

2 回复 | 直到 6 年前

Sajeetharan 6 年前

因为您没有使用controlleras语法,所以应该将值赋给$scope变量,

$scope.test = 11;

您需要将$scope注入为

 'PackagesService','$scope',
        class AppController {
            constructor (PackagesService,$scope) {
                 $scope.test = 11;
            }

Eduardo Rosostolato 6 年前

在AngularJS组件上,用 this 可以由作用域上的对象$ctrl访问。您应该使用:

<h1 class="homepage-title">Packages Name {{ $ctrl.test }}</h1>

可以将对象名更改为所需的任何对象 controllerAs 像这样:(但它 $ctrl 默认情况下)

export const AppComponent = {
template: require('./app.component.html'),
controllerAs: 'vm',
controller: [
    'PackagesService',
    class AppController {
        constructor (PackagesService) {
            this.test = 11;
        }
}]
};

参见AngularJS组件文档: https://docs.angularjs.org/guide/component