Angular ng-repeat

Question

I am trying to implement the angular ng-repeat directive and I do not understand why this code is not working correctly.

.directive("myRepeat", function() { return { transclude: "element", priority: 1000, compile: function(tElem, tAttrs) { var myLoop = tAttrs.myRepeat, match = myLoop.match(/^\s*(.+)+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$/), indexString = match[1], collectionString = match[2], parent = tElem.parent(); return function($scope, iElem, iAttrs, controller, $transclude) { $scope.$watchCollection(collectionString, function(newCollection) { var i, block, elements = []; // check if elements have already been rendered if (elements.length) { // if so remove them from DOM, and destroy their scope for (i = 0; i < elements.length; i++) { elements[i].el.remove(); elements[i].scope.$destroy(); } elements = []; } for (i = 0; i < newCollection.length; i++) { $transclude(function(clone, scope) { scope[indexString] = newCollection[i]; parent.append(clone); block = {}; block.el = clone; block.scope = scope; elements.push(block); }); } }); } } } }) 

and HTML snippet

 <ul ng-controller="MyCtrl"> <li my-repeat="city in cities">{{city.name}}</li> </ul> 

My problem is that the LI elements are displayed normally, but they do not contain city names. Please explain to me why this happens. I understand how ng-transclude works in the primitive case, when we have a template with an element with ng-transclude and specify transclude: true in our directive definition, but I don’t understand how this works with transclude: "element". PS Sorry for my English. I start:)

Answer 1

I noticed that your indexString is incorrect when I write it to the console. edit: match = myLoop.match(/^\s*(.+)+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$/) to match = myLoop.split(' ')

Full code that works for me:

 var app = angular.module('app', []); app.controller("MyCtrl", function($scope){ $scope.cities = [{ name:'a' }, {name: 'b'}, {name: 'c'}] }) app.directive("myRepeat", function() { return { transclude: "element", priority: 1000, compile: function(tElem, tAttrs) { var myLoop = tAttrs.myRepeat, match = myLoop.split(' '), indexString = match[0], collectionString = match[2], parent = tElem.parent(); console.log("match: " + match); console.log("index string: " + indexString); console.log("coll: " + collectionString); var elements = []; return function($scope, iElem, iAttrs, controller, $transclude) { $scope.$watchCollection(collectionString, function(newCollection) { var i; // check if elements have already been rendered if (elements.length) { // if so remove them from DOM, and destroy their scope for (i = 0; i < elements.length; i++) { elements[i].el.remove(); elements[i].scope.$destroy(); } elements = []; } for (i = 0; i < newCollection.length; i++) { $transclude(function(clone, scope) { scope[indexString] = newCollection[i]; parent.append(clone); block = {}; block.el = clone; block.scope = scope; elements.push(block); }); } }); } } } })