Angular component bindings objects not initialised

Question

I am using angular 1.5 components in my project . In my component i always get undefined for the object data.

I hope the $ctrl.products are not initialized before calling the product-result component. How to call the product-result component only after initializing the
$ctrl.products objects.

products.list.component.html

<div class="container">
    <div class="col-md-6" >
        <span>{{$ctrl.products}}</span>
        <product-result data="$ctrl.results" max="6"></product-result>
    </div>

</div>

Hint: we can't see your screen.

JB Nizet
– JB Nizet

2016-06-25 15:23:02 +00:00
Commented Jun 25, 2016 at 15:23 — JB Nizet
– JB Nizet, Commented Jun 25, 2016 at 15:23
Try removing $ sign before the variable name

Prasheel
– Prasheel

2016-06-25 15:36:30 +00:00
Commented Jun 25, 2016 at 15:36 — Prasheel
– Prasheel, Commented Jun 25, 2016 at 15:36

Richard Morgan · Accepted Answer · 2016-07-06 23:52:04Z

2

A much more simple solution is just to use ng-if to delay the rendering of the inner component until the results are loaded:

<product-result ng-if="$ctrl.results" data="$ctrl.results" max="6"></product-result>

This will allow you to keep your HTML in the template where it belongs but will prevent the inner component from being added to the DOM and initialized until $ctrl.results is defined.

answered Jul 6, 2016 at 23:52

Richard Morgan

7838 silver badges11 bronze badges

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

Comments

ArturoRomero · Accepted Answer · 2016-07-07 13:15:30Z

One way to accomplish this is to hook into angular's new component methods i.e. $onChanges and $onInit.

If products.list.component.js does say an API call on the products object which then renders a new $ctrl.results data set.

You could have product-result.js component check the one-way binding for $ctrl.results with the new $onChanges method. $onChanges is called whenever one-way bindings are updated. The method takes in a changes object parameter. The changes object has keys that are names of the bound properties that have changed.

Your code for product-result.js could be

/**
 * @ngdoc function
 * @name $onInit
 * @description on bootstrap for the component check if the value `ctrl.results ` is falsy    
*/
$onInit: function $onInit () {
    if (!this.results) {
        this.showNoDataAvaliable = true;
    }
},

/**
 * @ngdoc function
 * @name $onChanges
 * @description when component product-list passes a new value for $ctrl.results,  Show the data.
 * @param {Object} changes the changes object when any binding property is updated, this is similar to
 * having a watch function on $scope.variable   
 */
$onChanges: function $onChanges (changes) {
    if (changes.data && changes.data.currentValue) {
        this.showNoDataAvaliable = false;
        //... more code on how to display the data.
    }
}

Todd Motto has a great blog post about angular 1.5 component, I recommend you read https://toddmotto.com/angular-1-5-lifecycle-hooks

Suneet Bansal · Accepted Answer · 2016-06-25 17:44:25Z

-1

If you want to initialized the component after initialization of $ctrl.products then you can use $compile service which angular has provided.

Use the below line just after the line where $ctrl.products is getting initialized:

var domObj = $compile('<my-directive></my-directive>')($scope);
$('selector where you want to append this directive').append(domObj);

answered Jun 25, 2016 at 17:44

Suneet Bansal

2,7061 gold badge16 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular component bindings objects not initialised

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related