指令模板內的HTML元素

Question

我是angular js的新手，正在探索自定義指令。 我創建了一個指令並將其命名為datatable 。 下面是代碼：

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"}];
        }
    }
});

這段代碼可以正常工作，但是當我嘗試使用ng-repeat遍歷友數組時，它沒有打印任何內容。 我正在替換模板，如下所示：

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

我也想知道我是否在模板內使用任何HTML元素，例如，它不起作用：

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

也沒有用。

我究竟做錯了什么？

Answer 1

模板應該只有1個根元素，請嘗試以下操作：

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