如何在 AngularJS 指令中使用 compile 函数从服务中重复 ng-repeat 元素 [英] How to use compile function in AngularJS directive to ng-repeat elements from a service

问题描述

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

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

这是一个 jsfiddle. 我需要的只是渲染新的将消息添加到服务中的消息数组后，指令中的消息.

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

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

示例代码位于 jsfiddle 及以下:

HTML:

<my-simple-chat title="AngularJS Chat"></my-simple-chat>

JavaScript:

angular.module('myApp', []).factory('Chat', function () {var 消息 = [];函数发送消息(名称，文本){消息.推送({姓名:姓名，文字:文字});alert("从工厂发送消息:" + name + ", " + text + " : " + messages.length);};返回 {消息:消息，发送消息:发送消息};}).directive('mySimpleChat', ['Chat', function (chat) {var tmpl = '<div><h2>{{title}}</h2>'+'<input type="text" ng-model="name" placeholder="输入你的名字"/>'+'<hr/>'+'
'+'<input type="text" ng-model="text" required placeholder="Type a new message..."/>'+'<input type="submit" id="submit" value="发送"/>'+'</表单>'+'
'+'<li ng-repeat="chat.messages 中的消息">'+'<strong>{{message.name}}</strong>{{message.text}}' +'</li>'+'</ul>'+'
';返回 {限制:'E'，替换:真的，范围:{标题:'@title'}，模板:tmpl，控制器: ['$scope', '$element', '$attrs', '$transclude',函数 ($scope, $element, $attrs, $transclude) {$scope.name = '我的名字';$scope.text = '';$scope.sendMessage = 函数 () {chat.sendMessage($scope.name, $scope.text);$scope.text = '';};}],};}]);

解决方案

您在 chat.messages 上使用 ngRepeat 但从未分配 chat成为 $scope 的一部分.

 控制器:['$scope', '$element', '$attrs', '$transclude',函数 ($scope, $element, $attrs, $transclude) {$scope.name = '我的名字';$scope.text = '';$scope.chat = 聊天；//<--这样你就可以使用 ngRepeat$scope.sendMessage = 函数 () {chat.sendMessage($scope.name, $scope.text);$scope.text = '';};}],

更新小提琴.

Could someone, please, show me what I need to do to render in a directive new elements stored in an array in a service. In the example below, an alert from the service shows that each new element is added to the elements array, but how to make the directive show these new elements on the page?

I tried to read everything about compile function in a directive, but could not understand how to make my example work.

Here is a jsfiddle. All I need is to render new messages inside the directive after they are added to the message array in the service.

The Chat service is injected into directive as a chat variable, and in the directive template I want to repeat every message from the service:

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

Sample code is on jsfiddle and below:

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

              };

          }],

    };
}]);

解决方案

You are using ngRepeat on chat.messages but never assigning chat to be part of $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 = '';

          };

      }],

updated fiddle.

这篇关于如何在 AngularJS 指令中使用 compile 函数从服务中重复 ng-repeat 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！