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

Question

我在寻求你的帮助。我是AngularJS乞丐，组件绑定对我来说就像是等温线。我真的不明白为什么我的变量是一个未定义的集合.

你能帮帮我吗？

以下是我的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

属性绑定需要在烤肉串盒中

<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开发人员指南-指令规范化