var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope){
$scope.data = [
{ id: 1, name: "Taro", age: "21" },
{ id: 2, name: "Jiro", age: "34" },
{ id: 3, name: "Eiko", age: "18" }
];
});
app.directive("user", function($compile){
var template = ''
+ '<div class="user">'
+ ' <span class="user-id">{{user.id}}</span>'
+ ' <a class="user-name" href="#" ng-click="msg()">{{user.name}}</a>'
+ ' <span class="user-age">({{user.age}})</span>'
+ '</div>';
return {
restrict: "E",
scope: { user: "=data" },
template: template,
controller: function($scope){
$scope.msg = function(){
alert("I'm " + $scope.user.name);
};
},
};
});
<div ng-app="MyApp" ng-controller="MyCtrl">
<user ng-repeat="userdate in data" data="userdate" />
</div>
.user {
padding: 1em;
font-size: 24px;
}
.user-id{
color: green;
}
.user-name{
margin-left: 1em;
}
.user-age{
color: orange;
}