誰かが、サービスの配列に格納された新しい要素をディレクティブでレンダリングするために何をする必要があるかを教えてください。以下の例では、サービスからのアラートは、各新しい要素が要素配列に追加されたことを示していますが、ディレクティブでこれらの新しい要素をページに表示するにはどうすればよいでしょうか?
ディレクティブ内の関数に関するすべてを読み込もうとしまし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 = '';
};
}],
};
}]);