javascript - 模板文件中不提供 es6 组件内的 AngularJs 1.7 数据
问题描述
我只是在组件和模块设置上使用 ES6 类创建项目 AngularJs 1.7 和 webpack 4。
这是我的应用程序主模块。
// 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.confing 中的 HTML LOADER
{
// HTML LOADER
// Reference: https://github.com/webpack/raw-loader
// Allow loading html through js
test: /\.html$/,
loader: 'raw-loader'
}
我错过了什么,为什么this.test
模板内没有显示任何内容?
谢谢你的帮助!
解决方案
由于您没有使用 ControllerAs 语法,因此您应该将值分配给 $scope 变量,
$scope.test = 11;
你需要注入 $scope 作为
'PackagesService','$scope',
class AppController {
constructor (PackagesService,$scope) {
$scope.test = 11;
}
推荐阅读
- javascript - 带有 JS 自定义的数据中的 PDF SaveAS 文件名
- python - 在 django 简单标签中使用逐字标签
- pandas - 嵌套字典到多索引DataFrame(具体示例)
- flutter - 为什么 ChangeNotifierProvider 存在?
- angular - Angular 使用 html2canvas 并等待其完成(异步/等待?)
- javascript - 页眉和侧边栏之间的间距问题
- angular - 如何在 ngx-ui-loader 中排除动态 URL?
- python - 如何创建一个无限浮点数生成器以用作另一个函数的输入
- c++ - 在指针上实现列表
- kubernetes - 在 Kubernetes 中,PV/PVC 是否能保证 Pod 的粘性安装?