AngularJS has a super-real ngTransclude directive that replaces the html in your html directive template from the controller template. If you use an isolated scope in your directive, you can access variables from the scope using ngTransclude.
I tried to do this when I got a seemingly random result. ngTransclude inside ngRepeat returns a value from the scope of the directive instead of the scope of the controller.
By letting go of AngularJS documentation, I created Plunker: http://plnkr.co/edit/GtrYtGoy2fnvgkwLFAGN?p=preview
Js
angular.module('docsTransclusionExample', []) .controller('Controller', ['$scope', function($scope) { $scope.names = ['Tobias', 'Funke']; }]) .directive('myDialog', function() { return { restrict: 'E', transclude: true, scope: {}, templateUrl: 'my-dialog.html', link: function (scope, element) { scope.names = ['Jeff', 'Bridges']; } }; });
index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-example87-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="docsTransclusionExample"> <div ng-controller="Controller"> <my-dialog>Check out the contents, {{names}}!</my-dialog> </div> </body> </html>
my-dialog.html
<div class="alert" ng-transclude></div> <div ng-repeat="name in names"> <div class="alert" ng-transclude></div> {{name}} </div> <div class="alert" ng-transclude></div>
This code returns:
Check out the contents, ["Tobias","Funke"]! Check out the contents, ["Jeff","Bridges"]! Jeff Check out the contents, ["Jeff","Bridges"]! Bridges Check out the contents, ["Tobias","Funke"]!
According to the documentation I read, and this transition and scope article that I found for interception and scope, the switch should ONLY take in the controller scope, that is, in the middle two "Check the contents, {{names}}!" must read the same as external.
Further experiments allowed me to change the version of AngularJS from 1.2.15 to 1.3.0 rc
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
which leads to the correct (as I understand it) conclusion:
Check out the contents, ["Tobias","Funke"]! Check out the contents, ["Tobias","Funke"]! Jeff Check out the contents, ["Tobias","Funke"]! Bridges Check out the contents, ["Tobias","Funke"]!
Is there a workaround for this problem that I can use with 1.2.15, or am I sticking with this version? What should be the right behavior?