2

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

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

这是一个jsfiddle。我所需要的只是在将新消息添加到服务中的消息数组后在指令中呈现它们。

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

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

示例代码在jsfiddle及以下：

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 = '';

              };

          }],

    };
}]);
4

3 回答 3

2

您正在使用ngRepeatonchat.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 = '';

          };

      }],

更新的小提琴。

于 2013-08-14T13:19:03.510 回答
1

你可以像这样创建一个桥：

<li ng-repeat="message in messages()">

$scope.messages = function () {
    return chat.messages;
}
于 2013-08-14T13:30:52.977 回答
1

看起来在 SO 上写一个问题是 90% 的答案......我需要做的就是在指令中添加一个链接函数：

link: function ($scope, element, attributes) {
    $scope.messages = chat.messages;
}

chat.并从中删除ng.repeat：

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

我不确定这是完成任务的正确方法，但它确实有效。在文档中，我读到compile如果我在模板中使用，我必须使用函数ng-repeat，所以我仍然有些困惑。

更新的jsfiddle。

于 2013-08-14T13:23:00.050 回答