Angular 1.5 components not getting variable passed to component

Question

I'm new to .component() in Angular 1.5+ and I'm trying to create data in the top level app controller, and pass it to a child component. However, printing to the console gives me undefined in the following example and I'm not sure why.

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="Scripts/angular.js"></script>
    <script src="app.js"></script>
    <title></title>
    <meta charset="utf-8" />
</head>
<body ng-app="myApp" ng-controller="myController as vm">
    <app name="vm.myName"></app>
</body>
</html>

app.js

var app = angular.module("myApp", []);

app.controller("myController", ['$scope', function ($scope) {
    console.log("myController!");

   $scope.myName = "Rick";
}]);

app.component("app", {
    template: '<h1>Hello World</h1>',
    bindings: {
        name: '='
    },
    controller: function () {
        console.log(this.name); <-- prints undefined
    }
});

Naren Murali · Accepted Answer · 2017-09-29 13:48:44Z

1

The problem is that in the controller you are using the $scope to define the variable that is getting passed into the component but, in the controller block of the HTML you are using the this syntax for passing the variable into the component.

So the line with the problem is.

app.controller("myController", ['$scope', function ($scope) {
    console.log("myController!");
   $scope.myName = "Rick";
}]);

This is a standard scope syntax, but since we are using this syntax we need it to be.

app.controller("myController", ['$scope', function ($scope) {
    console.log("myController!");
    this.myName = "Rick";
}]);

Below is a working example.

JSFiddle Demo

answered Sep 29, 2017 at 13:48

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

Comments

Vladimir Zdenek · Accepted Answer · 2017-09-29 13:05:19Z

0

It is because you are trying to access it too soon. There is a component lifecycle hook called $onInit. All bindings will be resolved in that function, so you can use that to access your name property.

Try to modify your controller to something like this:

controller: () => {

    this.$onInit = () => {
        console.log(this.name);
    }

}

answered Sep 29, 2017 at 13:05

Vladimir Zdenek

2,2901 gold badge20 silver badges24 bronze badges

2 Comments

user441521 Over a year ago

That makes sense, but still getting undefined.

user441521 Over a year ago

It works fine when I pass from one component to another, but when trying to pass that top level controller variable to a component it's giving undefined.

korteee · Accepted Answer · 2017-09-29 13:16:49Z

0

$onChanges runs before $onInit. You can simply check when your value is passed to your component using this block of code:

this.$onChanges = (changesObj) => {
    if(changesObj.name && changesObj.name.currentValue) {
        console.log(this.name);
    }
}

You might want to take further look at angularjs 1.5+ components' documentation

answered Sep 29, 2017 at 13:16

korteee

2,7122 gold badges21 silver badges25 bronze badges

1 Comment

user441521 Over a year ago

It's not hitting this console.log() but that is the question. Why isn't the ng-controller variable being passed to the component. I mean I knew it wasn't which is why it was giving me undefined, but why and how do you get it to pass.

Collectives™ on Stack Overflow

Angular 1.5 components not getting variable passed to component

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related