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

Posted 2023-02-23

【中文标题】AngularJS 1.7.9 从控制器到组件的绑定变量提供未定义的值

【英文标题】：AngularJS 1.7.9 Binding variable from controller to component provide undefined value

【发布时间】：2020-04-14 16:12:26

【问题描述】：

我正在寻求您的帮助。 我是 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 = 
)

【问题讨论】：

这里有语法错误：this.countriesUnits = );

修复了语法错误，仍然是同样的错误

【参考方案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