AngularJs: Iterating over array inside directive in order to create nested set of directives

Question

Inside angularJS directive I'm trying to iterate over array and based on values I would like to create nested list of directives. Current version of directive

Directive type

    .directive("type", function($compile, $log){
        return{
            restrict: "E",
            replace: true,
            transclude: true,
            scope: {
                type: '='
            },
            template: "<div></div>",
            link: function(scope, element, attrs){
                if (angular.isArray(scope.type)){
                    angular.forEach(scope.type, function(value, index){
                        $log.error(value);
                        element.append("<type type='scope.type['"+index+"]'></type>");
                    });
                } else if (angular.isObject(scope.type)){
                    element.append("OBJECT")
                } else {
                    element.append("<div>{{scope.type}}</div>")
                }
                $compile(element.contents())(scope)
             }
        };
      })

I also tried to use above directive with next version of link function:

if (angular.isArray(scope.type)) {
    element.append("<div ng-repeat='element in scope.type'><type type='element'></type></div>");
} else if (angular.isObject(scope.type)) {
    element.append("OBJECT")
} else {
    element.append("<div>{{scope.type}}</div>")
}
$compile(element.contents())(scope)
}

None of provided codes solve my issue. Below you will find example explaining on specific case:

Let's say that I had next object in the scope.type = [null,"int"]. Now I would like to use <type type='type'><type> and as a result of first evaluation I want to have sth like: <type type='type[0]'></type><type type='type[1]'></type> Further evaluation of those values should lead to some simpler form but right now it is not important.

How I can achieve sth like this?

Edit

I tried even to exctract part of the code responsible for iteration to the seperate directive but it still does not work. Code:

Update link function in type directive:

link: function(scope, element, attrs) {
    if (angular.isArray(scope.type)) {
        element.append("<typeb type='scope.type'></typeb>")
    } else if (angular.isObject(scope.type)) {
        element.append("OBJECT")
    } else {
        element.append("<div>{{scope.type}}</div>")
    }
    $compile(element.contents())(scope)
}

New directive:

.directive("typeb", function($compile, $log){
      return{
          restrict: "E",
          replace: true,
          transclude: true,
          scope: {
              type: '='
          },
          template: "<div ng-repeat='t in type'>{{t}}</div>",
      };
    })

Problem still occurs but generated html contains only next pieces as a result of typeb directive: 

try element.append($compile("<div ng-repeat='element in scope.type'><type type='element'></type></div>")(scope)); — Pankaj Parkar
– Pankaj Parkar, Commented Jan 28, 2015 at 9:38
It does not help me. Interesting thing is that in html I see something like that:  in case that scope.type is equal to ["double","null"] — baju
– baju, Commented Jan 28, 2015 at 9:48

Pankaj Parkar · Accepted Answer · 2015-01-29 07:38:33Z

1

The problem you are getting is  this is because your type didn't contains any value, when it is inside typeb directive

Your directive shouldn't be use scope.variable on view. Scope variable will be directly accessible by their name like

{{type}} or <typeb type='type'></typeb>

Change your link code to below.

Directive link

link: function(scope, element, attrs) {
    if (angular.isArray(scope.type)) {
        element.append("<typeb type='type'></typeb>")
    } else if (angular.isObject(scope.type)) {
        element.append("OBJECT")
    } else {
        element.append("<div>{{type}}</div>")
    }
    $compile(element.contents())(scope)
}

Thanks.

edited Jan 29, 2015 at 7:38

answered Jan 29, 2015 at 7:11

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Peter Ashwell · Accepted Answer · 2015-01-28 09:18:08Z

0

Use an ng-repeat in the template

<your-directive attr="item.someattr" ng-repeat="item in items"></your-directive>

.directive("type", function($compile, $log){
    return{
        restrict: "E",
        replace: true,
        transclude: true,
        scope: {
            type: '='
        },
        template: "NG REPEAT HERE",
        ...
  })

answered Jan 28, 2015 at 9:18

Peter Ashwell

4,3022 gold badges20 silver badges22 bronze badges

4 Comments

baju Over a year ago

Where exactly? I am using ng-repeat in link function (second example) but it does not work.

Peter Ashwell Over a year ago

Updated it. Basically, in the outer scope of where you want your repeated directives. You have this outer directive type, use it's template to ng-repeat the sub directives

baju Over a year ago

The thing is that value of the attribute passed to the type directive it is not always array or object - sometimes it could be just single string like: 'int'. It will tackle such situation?

Peter Ashwell Over a year ago

Allow your sub directive to deal with it's actual type, displaying itself in the correct way. Separate the repeating behaviour from the type specific display behaviour

Collectives™ on Stack Overflow

AngularJs: Iterating over array inside directive in order to create nested set of directives

Edit

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related