javascript - AngularJS模板组件不呈现变量
问题描述
我的目标是使用 angularjs 组件呈现条形图 angularJs 图表。所以我需要从主控制器使用绑定,以防数据发生变化。
我有一个 angularjs 控制器,有一个名为“标签”的数组,如下所示:
var app = angular.module("app", ["ui.router", "ngCsv" ,'ngSanitize','ui.bootstrap' ])
app.controller('AnalyseController',AnalyseController)
AnalyseController.$inject = ['$scope'];
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
然后,我试图从这样的 angularjs 组件访问“标签”:
app.component('graphique', {
templateUrl:'_commerciaux/views/include/graphique.html',
bindings:{labels:'='},
controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){
console.log(labels);
this.labels = labels;
console.log(this.labels);
this.$onInit = function() {
this.labels = labels;
};
}]
})
好吧,控制台日志很好地显示了标签,但是没有办法在模板中显示这个变量:它似乎是 undefined 。奇怪的是我在控制台内看到它。
我正在尝试生成一个图形,它也不起作用,但是只要 ai 不使用“绑定过程”并直接在组件内部设置变量,它就会起作用!
这是我的 html 模板,$ctrl.labels 不显示,而它是在父控制器中设置的,并且组件应该以 2 方式绑定方式绑定它:
<div class="chart-wrapper analyse_graph" >
<canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-legend="true" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-colors="$ctrl.colors" height="70"></canvas>
</div>
<div>
{{$ctrl.labels}} // NOT SHOWING !!
</div>
测试 1:我已经像这样更改了我的控制器:
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
$scope.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
但是现在,控制台说:ReferenceError:“未定义标签”,(此消息来自组件)。所以,只要我不使用 $scope,它就在控制台内工作,但模板不会呈现绑定变量......
编辑2:这就是我调用模板的方式,非常简单:
<graphique ></graphique>
编辑 3:只要我直接在组件内设置变量并删除绑定部分,只是为了让您知道图形如何工作得很好:
HTML 中的组件调用:
<graphique ></graphique>
组件本身:
app.component('graphique', {
templateUrl:'_commerciaux/views/include/graphique.html',
controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){
this.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
this.data = [[12,24,40,35,20,12,55,78,45,12,32,45],[10,15,30,35,12,15,70,24,25,10,47,25]];
}
模板:
<div class="chart-wrapper analyse_graph" >
<canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-legend="true" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-colors="$ctrl.colors" height="70"></canvas>
</div>
<div>
{{$ctrl.labels}}
</div>
注意:是的,{{$ctrl.labels}} 显示良好,但只要我尝试从组件传递带有“绑定”部分的标签,它就不再起作用,模板不显示。
不幸的是,如果我不能解决这个问题,我必须使用老式的 '$emit' 并复制大量的图表和老式的学校控制器,因为“绑定”不起作用。也许是因为我在主控制器中使用的 $scope 语法:它可能太旧了..
解决 嘿 !我使用的是 angularjs 1.68,所以我之前应该看过这个:
https://code.angularjs.org/1.6.10/docs/guide/component
它与最新版本有些不同!
所以这是我现在的主要观点(请注意缺少的'as ctrl'):
<div ng-controller="AnalyseController as ctrl" style="overflow:auto;max-height:1000px;">
接下来,在我的主控制器中,我现在设置如下变量:
this.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
this.data = [[12,24,40,35,20,12,55,78,45,12,32,45],[10,15,30,35,12,15,70,24,25,10,47,25]];
然后我的组件现在看起来像这样:
app.component('graphique', {
templateUrl:'_commerciaux/views/include/graphique.html',
bindings:{labels:'=',data:'='},
controller : [ '$http','$scope','$rootScope','toastr',function control($http,$scope,$rootScope,toastr){
// No vars or init there
})
最后,这是我视图中的组件调用,请注意变量调用:
<graphique labels="ctrl.labels" data="ctrl.data"></graphique>
最后,我的模板仍然引用 $ctrl vars :
<div class="chart-wrapper analyse_graph" >
<canvas class="chart chart-line" chart-data="$ctrl.data" chart-labels="$ctrl.labels" chart-legend="true" chart-series="$ctrl.series" chart-options="$ctrl.options" chart-colors="$ctrl.colors" height="70"></canvas>
</div>
<div>
{{$ctrl.labels}}
</div>
非常感谢您的帮助!Angularjs 是超级 TOP,我的项目是 1.6.8 版本,所以说组件就不一样了!
解决方案
如果您使用 $ctrl 语法:
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
var ctrl = this;
ctrl.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
对于您的模板,您需要传递参数
<graphique labels="$ctrl.labels"></graphique>
如果您使用 $scope 语法:
function AnalyseController($rootScope, $scope, $timeout, $http, $location, $window, $filter, $mdToast, $mdDialog, $sce, $state) {
$scope.labels = ['Toutes','Carrefour','Intermarché','Leclerc','Super U ','Carrefour','Lidl','Intersport','Decathlon','Dia','Renault','Osiatis'];
}
并且在模板中
<graphique labels="labels"></graphique>
推荐阅读
- javascript - 如何正确使用 flyTo() 和 setInterval() 或 setTimeout() Javascript 函数?
- regex - 正则表达式提取一个字符的第二个实例和另一个字符的第二个实例之间的字符串
- javascript - 从对象数组中删除键值
- linux - 是否可以挂载 FIT 映像中包含的文件系统?
- postgresql - 尝试将列类型从文本更改为几何时出错
- xpath - Google Sheets 表格格式中的 IMPORTXML XPath 问题
- python - keras 在不同 conda 环境下的错误
- python - 将 python 代码传输到 tensorflow,而 AutoGraph 不起作用
- laravel - 如何在 Laravel WHERE 子句中使用 IN 运算符?
- c++ - 无法在 OSX 上更改 OpenGL 版本