ng-repeat inside template does not seem to work (demo)

[pandaiolo]

Why is it not possible to use ng-repeat inside a deckgrid while ng-repeat can be used recursively ?

Demonstration of both non-working (deckgrid) and working (ng-repeat) behaviour here : (http://codepen.io/anon/pen/nfzHk/)

[pandaiolo]

Seem related to this anguar issue. I tried the mentioned workaround which is to wrap ng-repeat element if it is the card's root element, but with no success...

[pandaiolo]

As a quick workaround, for anyone interested, here is a very basic directive to replace ng-repeat and that does not creates a new scope while iterating through card items

    // Example markup : <div no-scope-repeat items="card.items"></div>
    .directive('noScopeRepeat', function($compile) {
        return function(scope, elem, attrs) {
            scope.$watch(attrs.items, function(items) {
                if (!items) return;

                // Example template that will be repeated, with above markup,  
                // #OBJ#.myValue will be replaced by card.items[idx].myValue at each step
                var template = '<div>{{ #OBJ#.myValue }}</div>';

                items.forEach(function(val, key) {
                    var newElement = angular.element(
                        template.replace(/#OBJ#/g, attrs.items + '[' + key + ']')
                    );
                    $compile(newElement)(scope);
                    elem.append(newElement);
                });
            });
        };
    })

Anyone makes a transcluded version I'm interested :-)

[tplaindoux]

@pandaiolo This is how I implemented it. I'm not sure this is the most efficient way but it allows me to use custom template import, more flexible.

template note that this is included in the card template.

<ANY no-scope-repeat items='card.itemList'></ANY >

included template (partial_comment_list.html)

<div class="feed-box" ng-repeat="comment in items">
 ...your code like any ng-repeat...
 </div>

directive

  'use strict';

angular.module('siteClientApp')
  .directive('noScopeRepeat', function () {
    return {
      restrict: 'AE',
      templateUrl: 'partial/normal_partial.html',
      scope: { items: '=items'},
      compile: function CompilingFunction($templateElement) {
        $templateElement.replaceWith(this.template);
        return function postLink() {
          return true;
        };
      }
    };
  });

UPDATE: directive is now working as it should. You just have to .push() data to the card.itemList to update the template.

example:

 $scope.feeds[itemId].comments.push(data.comment);

[zenithtekla]

Indeed, it does work. I was able to have ng-repeat div work within the template file and render different templates for different listing styles. I have experience and confidence working with Directives in AngularJS. You are welcome to check out my repo for solution to your end: my repo - R37