Isolated scope parent directive to ng-repeat children

Question

I have a parent directive:

.directive("parentDirective", function(){
  return{
    restrict: "A",
    controller: "Ctrl",
    scope: {},
    transclude: true,
    template: "{{output1}}<div ng-transclude></div>",
    link: function(scope, elem, attrs){
      scope.output1 = "output1"
      scope.output2 = "output2"
      scope.output3 = "output3"

      scope.children = [1,2,3,4]
    }
  }
})

The following parent directive is isolated scope and has children directives which I'd like to loop through via ng-repeat:

.directive("childDirective", function(){
  return{
    restrict: "A",
    controller: "Ctrl",
    scope: {},
    transclude: true,
    template: "{{output1}}<div ng-transclude></div>",
    link: function(scope, elem, attrs){
      scope.output1 = "output1"
      scope.output2 = "output2"
      scope.output3 = "output3"
    }
  }
})

HTML:

<body ng-app="app">
  <div parent-directive >
    {{output2}}
    {{children}}

    <div child-directive ng-repeat="child in children">

    </div>

  </div>
</body>

But due to the fact that I have isolated the scope, doing scope.children = [1,2,3,4] does not output to the html to then be used in the ng-repeat for the children. How can I solve this?

See JSBIN: http://jsbin.com/gubamu/2/edit?html,js,output

Thanks!

This is how `ngTransclude` behaves with isolate scope... http://stackoverflow.com/a/17793894/3199781 — Anthony Chu, Oct 23 '14 at 18:25
You need to pass the `scope.children` to your child through the `scope`. Do you want one way binding or two way binding? — Kousha, Oct 23 '14 at 19:40

Isolated scope parent directive to ng-repeat children

0 Answers0