AngularJS模板组件不呈现变量

Question

我的目标是使用 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 。奇怪的是我在控制台中看到了它。

我正在尝试生成一个图表，它也不起作用，但是只要我不使用“绑定过程”并直接在组件内设置变量，它就会起作用！

这是我的 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: "labels is not defined"，（此消息来自组件）。所以，只要我不使用 $scope，它就可以在控制台内工作，但模板不会呈现绑定变量...

EDIT 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版本，所以说组件就不一样了！

Answer 1

如果你使用 $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>