CODEWITHSUNDEEP
javascriptangularjs
0xen
0xen

Reputation: 139

Angular 1.6 component bindings return undefined

I have set up an example where I wish to pass an ID to my component. It is my understanding that using two-way data binding I would call the component like so

Template File:

<div ng-controller="searchCtrl as vm">
    <search-condition id="vm.id"></search-condition>
</div>

When defining the controller, I specify that I want a two way binding between the components through the vm.id like so.

comp.component('searchCondition', {
    templateUrl: 'Core/Views/search-condition.html',
    bindings: {
        id: '='
    }
});
comp.controller('searchConditionCtrl',function($scope){
    var vm = this;
    this.$onInit = function() {
        console.log(vm.id);
    };
});

When attempting to output the value of vm.id all I receive is 'undefined'. Also when I try and output the value through {{vm.id}} no data is output, suggesting the data never arrives in the component.

Upvotes: 0

Views: 107

Answers (1)

Michael Warner
Michael Warner

Reputation: 4217

When you pass a value through props the variable changes to the prop name.

Example

Usage

<search-condition prop="data"></search-condition>

In SearchCondition

<div>{{prop}}</div>

This will show the data value as data is being assigned to prop

Now there is one Angular thing you need to know here. With Components Angular 1 defaults the controllerAs value with $ctrl so if SearchCondition is a component and not a directive prop would be {{$ctrl.prop}}

In your case try {{$ctrl.id}} and it should show up in the template of search-condition

If you want to change the default value of controllerAs just define it when you create the component like this.

.component('myCoolComponent', {
  controllerAs: 'vm',
  bindings: { ... }
})

If it is defined like this {{vm.id}} would work.

I would suggest looking at the Docs for all the options you have when defining a component and what the defaults are. https://docs.angularjs.org/guide/component

Upvotes: 1

Related Questions