Angular: Empty Fiddle
http://angularjs.org/
by gogirl
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<my-list items="model.items"></my-list>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.directive('myList', function() {
var directiveDefinition = {
restrict:'E',
template:'<div>'+
'<ul><li ng-repeat="item in items()">{{item.id}}- {{item.text}}</li></ul>'+
'<button ng-click="addItem()">Add item</button>'+
'</div>',
replace:true,
transclude:false,
scope:{
items:'accessor'
},
controller:function listController($scope){
$scope.addItem= function(){
var itemIndex = $scope.items().length;
var newItem = {id:itemIndex , text:"item "+itemIndex};
$scope.items().push(newItem);
};
},
link: function postLink(scope, iElement, iAttrs, ctrl){
console.log(scope);
}
};
return directiveDefinition;
});
function MyCtrl($scope) {
$scope.model={};
$scope.model.items= [{id:0, text:"item 0"}, {id:1, text:"item 1"}, {id:2, text:"item 2"}];
}