CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeatangular-directiveangular-components
Bogdan
Bogdan

Reputation: 696

Angular 1.5 component inside ng-repeat, template function run just once

I tried to use angular component replacing directive for creating component (a data table). I want to use the component inside of ng-repeat like:

<div ng-repeat='item in items'>
<my-datatable></my-datatable>
</div>

The my-datatable component code look like this:

 angular.module('App').component('myDatatable', {
        bindings: {
            ctrl: '=?',
            datasource: '=?'
        },
        bindToController: true,
        controllerAs: 'dataTable',
        template: function(){},
        controller: function(){}
    });

First problem: 1. template function is not runnig for every instance of my-datatable component. That mean, if inside my-datatable I have other components generated based by an unique Id of my-datatable (which can be create only in controller), it's difficult to write that code. 2. The nested isolate scope, create o much too long chains of $parent, for make a reference to some scope variable, something like this (if I use two nested my-datatable's): 

 ng-click="$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.select($parent.$parent.$parent.$parent.dataItem,dataItem)"

So, my question is: It is a way to avoid this problems using angular component?

Writing controls code with directive without isolate scope, I don't have this problems. That why I want to change my code for all angular components as directives.

I start to change may component into directive, and I remember few things:

That mean,it remain only the problem to generate unique id for each component instance in template function. In other words: how to run template function on each instance of component.

For exemplify: https://jsfiddle.net/bogdanim36/t3gmzb6z/3/

And made some tests and I discover that it's happen the same with directive inside ng-repeat: template function is not running for every instance of component.

Upvotes: 0

Views: 1221

Answers (1)

Bogdan
Bogdan

Reputation: 696

Finally I generate html code in controller, to solve this issue, That mean one more digest cycle. Is not what I want, but i decided it's the best solution in my case.

Upvotes: 0

Related Questions