adding ng-repeat is causing Error: $compile:ctreq

Question

I have a custom directive that requires the leaflet directive so I can access the controller:

restrict: 'E',
require: '^leaflet',
scope: {

},
template: "",
link: function(scope, element, attrs, controller) {

}

When I use my custom directive in my app's controller without implementing ng-repeat it works fine. Like this:

controller's HTML without ng-repeat

<leaflet defaults="defaults" center="center" markers="markers" layers="layers" paths="paths">
  <ng-include src="/markers.html" />
  <my-directive 
    waypoints="wps">
  </my-directive>
</leaflet>

controller's JS without ng-repeat

$scope.wps = [[32.745,-117.2776],[32.693,-117.3188]];

However, when I try to add ng-repeat I end up getting the following error:

Error: [$compile:ctreq] http://errors.angularjs.org/1.3.12/$compile/ctreq?p0=leaflet&p1=myDirective

controller's HTML with ng-repeat

    <leaflet defaults="defaults" center="center" markers="markers" layers="layers" paths="paths">
        <ng-include src="/markers.html" />
        <my-directive 
            ng-repeat="(name, data) in routes"
            name="{{ name }}"
            waypoints="data.wps">
        </my-directive>
    </leaflet>

controller's JS with ng-repeat

$scope.routes = {
  r1: {
    wps: [[32.745,-117.2776],[32.693,-117.3188]]
  }
}

What have I screwed up?

I assume it's because ng-repeat creates a new scope. You need to pass your leaflet object as a parameter — aorfevre, Jun 23 '15 at 19:12
When you use `ng-repeat` a new scope is created for each row, and since your child directive creates isolated scope the parent hierarchy gets gets affect. Since you child does a `require` on parent directive controller, this issue may be coming. — Chandermani, Jun 23 '15 at 19:20
@aorfevre what do you mean pass the leaflet object as a parameter? Where would I do that? — Mike S, Jun 23 '15 at 19:34
I'm pretty confident the error lies in the code you don't show. There's no reason this shouldn't work. — a better oliver, Jun 23 '15 at 20:00
There is one line I was removing in my code. I updated the question. — Mike S, Jun 23 '15 at 20:14

score 3 · Accepted Answer · answered Jun 23 '15 at 20:14

3

You have <ng-include src="/markers.html" /> before your directive. You need to explicitly close that tag. See this bug report.

answered Jun 23 '15 at 20:14

Stephen

2,613
1
24
42

adding ng-repeat is causing Error: $compile:ctreq

1 Answers1