Search code examples
angularjsangularjs-components

Angular component bindings objects not initialised

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>
Solution

  • 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);