AngularJS 1.7.9 Binding variable from controller to component provide undefined value

Question

i'm asking for your help. I'm an AngularJS begginer and components bindings looks like esotherical for me. I don't really understand why my variables a sets to undefined.

Could you help me please ?

Here is my 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>

My Component 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;
        }
    }
})

My Controller JS:

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

There is a syntax error here: this.countriesUnits = {);

Bill P
– Bill P

2019-12-23 11:22:01 +00:00
Commented Dec 23, 2019 at 11:22 — Bill P
– Bill P, Commented Dec 23, 2019 at 11:22
Syntax error fixed, by still the same bug

Clement
– Clement

2019-12-23 11:25:26 +00:00
Commented Dec 23, 2019 at 11:25 — Clement
– Clement, Commented Dec 23, 2019 at 11:25

georgeawg · Accepted Answer · 2019-12-23 12:16:10Z

2

Attributes bindings need to be in 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>

For more information, see

AngularJS Developer Guide - Directive Normalization

answered Dec 23, 2019 at 12:16

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS 1.7.9 Binding variable from controller to component provide undefined value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related