AngularJS custom-repeat (broken)
HTML
<script src="http://ci.angularjs.org/view/AngularJS/job/angular.js-angular-master/lastSuccessfulBuild/artifact/build/angular.js"></script>
<script type="text/ng-template" id="customRepeat.html">
<div>
<div>
<div ng-repeat="item in items track by item.id" class="custom-repeat-item">
{{ item.id }}
<br/>
<span transclude-extended="{ transcludeFunction: transclude, item: item }"></span>
</div>
</div>
</div>
</script>
<div ng-controller="MainController">
<custom-repeat items="items">
{{ text }}
<br/>
{{ item.name }}
</custom-repeat>
<button ng-click="updateProperty()">Update property</button>
<button ng-click="updateItems()">Update items</button>
</div>
CSS
.custom-repeat-item {
border: 1px solid black;
margin-bottom: 10px;
}
JavaScript
var app = angular.module('myApp', []);
app.controller("MainController", function ($scope) {
$scope.text = "Hello world";
$scope.items = [{
id: 1,
name: "one"
}, {
id: 2,
name: "two"
}, {
id: 3,
name: "three"
}];
$scope.updateProperty = function () {
$scope.items[1].name = "dos";
};
$scope.updateItems = function () {
$scope.items = [{
id: 1,
name: "once"
}, {
id: 2,
name: "doce"
}, {
id: 3,
name: "trece"
}];
};
});
app.directive("customRepeat", function () {
return {
restrict: "E",
transclude: true,
templateUrl: "customRepeat.html",
scope: {
items: "="
},
link: function (scope, element, attrs, controllers, transclude) {
scope.transclude = transclude;
}
};
});
app.directive("transcludeExtended", function () {
return {
link: function (scope, element, attrs) {
var transcludeExtended = scope.$eval(attrs.transcludeExtended);
transcludeExtended.transcludeFunction(function (clone, childScope) {
element.append(clone);
childScope.item = transcludeExtended.item;
});
}
};
});