HTML elements inside template of a directive

Question

I am new to angular js and exploring custom directives. I have created a directive and have named it datatable . Below is the code:

angular.module('myApp.directives', []).directive('datatable', function(){
    return{
        restrict: 'E',
        scope:{
            friends: '='
        },
        template : 'Hey{{friends[0].firstName}} : {{friends[0].lastName}}',
        controller :function($scope)
        {
            $scope.friends =[{"firstName" : "ABC", "lastName" : "XYZ"}];
        }
    }
});

This code is working fine, but when I try to loop through the friend array using ng-repeat , it is not printing anything. I am replacing the template as below:

template : '<li ng-repeat ="friend in friends"> Hey{{friend.firstName}} : {{friend.lastName}}</li>'

I am also wondering if I use any HTML element inside template it is not working for example:

template : '<h1>Hey{{friends[0].firstName}} : {{friends[0].lastName}}<h1>',

also did not work.

What am I doing wrong?

Answer 1

模板应该只有1个根元素，请尝试以下操作：

template : '<ul><li ng-repeat ="friend in friends"> Hey{{friend.firstName}} : {{friend.lastName}}</li></ul>'