如何使用 AngularJS 指令中的编译函数来重复服务中的元素

请有人告诉我需要做什么才能在指令中呈现存储在服务中的数组中的新元素。在下面的示例中，来自服务的警报显示每个新元素都已添加到 elements 数组中，但是如何使指令在页面上显示这些新元素呢？

我尝试阅读有关的所有内容compile指令中的函数，但无法理解如何使我的示例工作。

这里有一个jsfiddle http://jsfiddle.net/Vczj6/11/.我所需要的只是在将新消息添加到服务中的消息数组后在指令内呈现新消息。

The Chat服务作为指令注入到指令中chat变量，并且在指令模板中我想重复来自服务的每条消息：

'<ul>' +
     '<li ng-repeat="message in chat.messages">' +
          '<strong>{{message.name}}</strong> {{message.text}}' +
      '</li>' +
'</ul>'

示例代码已开启jsfiddle http://jsfiddle.net/Vczj6/11/及以下：

HTML:

<div ng-app="myApp">
<my-simple-chat title="AngularJS Chat"></my-simple-chat>
</div>

JavaScript：

angular.module('myApp', [])
.factory('Chat', function () {
    var messages = [];
    function sendMessage(name, text) {
        messages.push(
            {
                name: name,
                text: text
            });
        alert("Sending message from factory: " + name + ", " + text + " : " + messages.length);       
    };

    return {
        messages: messages,
        sendMessage: sendMessage
    };

})
.directive('mySimpleChat', ['Chat', function (chat) {

    var tmpl = '<div><h2>{{title}}</h2>' +
                    '<input type="text" ng-model="name" placeholder="Type your name"/>' +
                    '<hr />' +
                    '<form ng-submit="sendMessage()">' +
                        '<input type="text" ng-model="text" required placeholder="Type a new message..."/>' +
                        '<input type="submit" id="submit" value="Send"/>' +
                    '</form>' +
                        '<ul>' +
                            '<li ng-repeat="message in chat.messages">' +
                                '<strong>{{message.name}}</strong> {{message.text}}' +
                            '</li>' +
                        '</ul>' +
                '<div>';

    return {
        restrict: 'E',
        replace: true,
        scope: { title: '@title' },
        template: tmpl,

        controller: ['$scope', '$element', '$attrs', '$transclude',
          function ($scope, $element, $attrs, $transclude) {
              $scope.name = 'MyName';
              $scope.text = '';

              $scope.sendMessage = function () {
                  chat.sendMessage($scope.name, $scope.text);
                  $scope.text = '';

              };

          }],

    };
}]);

您正在使用ngRepeat on chat.messages但从不分配chat成为其中的一部分$scope.

    controller: ['$scope', '$element', '$attrs', '$transclude',
      function ($scope, $element, $attrs, $transclude) {
          $scope.name = 'MyName';
          $scope.text = '';
          $scope.chat = chat;  //<--this so you can use ngRepeat
          $scope.sendMessage = function () {
              chat.sendMessage($scope.name, $scope.text);
              $scope.text = '';

          };

      }],

更新了小提琴。 http://jsfiddle.net/markcoleman/Vczj6/15/