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

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 に答える
1

次のようなブリッジを作成できます。

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

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