AngularJS 1.7.9从控制器到组件的绑定变量提供未定义的值

Question

我正在寻求您的帮助。我是AngularJS的入门者，而组件绑定对我来说似乎有些烦人。我不太明白为什么我的变量设置为undefined。

您能帮我吗？

这是我的HTML：

<div ng-controller="mapController as map" style="text-align:center;">
    <div>{{map.lastClickedCountry}}</div>
    <risk-map lastClickedCountry="map.lastClickedCountry"
              countriesUnits="map.countriesUnits">
    </risk-map>
</div>

我的组件JS：

angular.module('riskApp').component("riskMap", {
    bindings: {
        lastClickedCountry: '=',
        countriesUnits: '='
    },
    templateUrl: 'template/risk.html',
    controller: function ($scope) {
        this.$onInit = function () {
            console.log("onInit")
            console.log(this);
            console.log($scope);
        };

        this.$onChanges = function () {
            console.log("onChange")
            console.log(this);
            console.log($scope);
        };

        this.setArrivant = function (pays, nombreArrivant) {
            this.countriesUnits[pays].arrivant = nombreArrivant
        }

        this.setStationnaire = function (pays, nombreStationnaire) {
            this.countriesUnits[pays].stationnaire = nombreStationnaire
        }


        this.getArrivant = function (pays) {
            return this.countriesUnits[pays].arrivant
        }

        this.getStationnaire = function (pays) {
            return this.countriesUnits[pays].stationnaire
        }

        this.click = function (country) {
            console.log("Dernier pays : " + this.lastClickedCountry)
            console.log("Pays click : " + country)
            console.log(this)
            this.lastClickedCountry = country;
        }
    }
})

我的控制器JS：

angular.module('riskApp').controller('mapController', function 
CountCtrl($scope) {
    this.lastClickedCountry = "test";
    this.countriesUnits = {}
})

Answer 1

属性绑定必须位于kebab-case中：

<div ng-controller="mapController as map" style="text-align:center;">
    <div>{{map.lastClickedCountry}}</div>
    <risk-map last-clicked-country="map.lastClickedCountry"
              countries-units="map.countriesUnits">
    </risk-map>
</div>

有关更多信息，请参阅

• AngularJS Developer Guide - Directive Normalization