How to get ng-repeat item inside transcluded template?

Question

How I can use ngRepeat item inside transcluded template? Is it possible?

Directive template:

<ng-transclude ng-repeat="record in records | filter1 | filter2"></ng-transclude>

Directive:

  app.directive('myDirective', function () {
    return {
      templateUrl: '/views/directives/mydirective.html',
      restrict: 'A',
      transclude: true,
      scope: {
        records: '='
      }
    };
  });

Controller view:

<div my-directive records="myRecords">
  {{ myDirective.record }}
</div>

does this help?http://stackoverflow.com/questions/14388247/ng-repeat-with-ng-transclude-inside-a-directive — Jony-Y, Sep 14 '15 at 20:44
@Jony-Y, Thank you, I'm already viewed this question, but I need to hide ngRepeat inside the directive — kovalevsky, Sep 14 '15 at 20:49
why do you need to use transclude though? either just make it an E directive and put it inside the div or append the template to the div and manually create it... no reason to transclude — Jony-Y, Sep 14 '15 at 20:51

score 1 · Accepted Answer · answered Sep 14 '15 at 20:53

1

Doesn't look like it from the way you're doing it.

But you can $compile the template in the directive to achieve this.

http://jsbin.com/mirisixodo/edit?html,js,console,output

answered Sep 14 '15 at 20:53

micah

7,596
10
49
90

score 0 · Answer 2 · answered Jan 16 '23 at 16:28

(Realizing this is almost certainly too late for you to use...)

Looks like this was discussed in detail in this AngluarJS GitHub issue, and there is, thanks to moneytree-doug, a way to solve your issue without resorting to compile.

The deal seems to be that, at least starting at AngularJS 1.2.18, transcluding creates a child scope of its own, so your iteration variable is no longer accessible.

$parent is accessible, however, and we can use that to access the iteration variable and accomplish what you're looking to do.

Building off of Micah's jsbin...

HTML:

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="TestCtrl">
    <my-directive records="myRecords">
      ?: {{$parent.record}}
    </my-directive>
  </div>
</body>
</html>

JavaScript

var app = angular.module('app', [])
  .controller('TestCtrl', function($scope) {
    $scope.myRecords = ['foo', 'bar', 'baz'];
  });

app.directive('myDirective', function () {
  return {
    scope: {
      records: '='
    },
    transclude: true,
    template: 'HELLO' +
      '<div id="inner-transclude"' +
      '  ng-transclude' +
      '  ng-repeat="record in records">X</div>',
    controller: function ($scope) {
      console.log($scope.records);
    },
    restrict: 'E'
  };
});

Result

HELLO
?: foo
?: bar
?: baz

JsBin of reasonable success.

So, again, the crux of this is changing the line if your controller from {{ myDirective.record }} to ?: {{$parent.record}}.

How to get ng-repeat item inside transcluded template?

2 Answers2

HTML:

JavaScript

Result