AngularJS模板組件未呈現變量

Question

我的目標是使用angularjs組件繪制條形圖angularJs圖表。 因此，如果數據發生更改，我需要使用主控制器的綁定。

我有一個angularjs控制器，帶有一個名為“ labels”的數組，如下所示：

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，我的projet版本是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>