如何使用AngularJS指令编译功能，从服务NG-重复元素 [英] How to use compile function in AngularJS directive to ng-repeat elements from a service

问题描述

可能有人，请告诉我什么，我需要做存储在服务上的阵列指令新的元素来渲染。在下面的例子中，从服务的警报显示，每一个新的元素被添加到元件阵列，但如何使该指令在页面上显示这些新的元素

我想了解的一切编译功能指令，但不明白如何让我的例子的工作。

这里是一个的jsfiddle 。所有我需要的是新的渲染指令内的消息后它们被添加到在该服务的消息数组。

的聊天服务注入指令为聊天变量，并在指令模板我不想重复从服务的每个消息：

 '＆LT; UL＆GT;' +
     '＆LT;李NG重复=消息chat.messages＆GT;' +
          '＆LT;强＆GT; {{message.name}}＆LT; / STRONG＆GT; {{message.text}}'+
      '＆LT; /李＆GT;' +
'＆LT; / UL＆GT;'
 

样code是在的jsfiddle 并如下：

HTML

 ＆LT; D​​IV NG-应用=对myApp＆GT;
＆LT;我的简单的聊天标题=AngularJS聊天＆GT;＆LT; /我简单的聊＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  angular.module（'对myApp'，[]）
.factory（聊天，函数（）{
    变种消息= [];
    函数的sendMessage（名称，文字）{
        messages.push（
            {
                名称：姓名，
                文字：
            }）;
        警报（从工厂发送消息：+姓名+，+文字+：+ messages.length）;
    };    返回{
        消息：邮件，
        的sendMessage：的sendMessage
    };}）
.directive（'mySimpleChat'，['聊天'，功能（聊天）{    VAR TMPL ='＆LT; D​​IV＆GT;＆LT; H2＆GT;的{{title}}＆LT; / H＆GT;' +
                    '＆LT;输入类型=文本NG模型=名称占位符=键入您的姓名/＆GT;' +
                    '＆LT;小时/＆GT;' +
                    '＆LT;形式NG提交=的sendMessage（）＆GT;' +
                        '＆LT;输入类型=文本NG模型=文本占位符所需=输入一个新的消息....../＆GT;' +
                        '＆LT;输入类型=提交ID =提交值=发送/＆GT;' +
                    '＆LT; /形式为GT;' +
                        '＆LT; UL＆GT;' +
                            '＆LT;李NG重复=消息chat.messages＆GT;' +
                                '＆LT;强＆GT; {{message.name}}＆LT; / STRONG＆GT; {{message.text}}'+
                            '＆LT; /李＆GT;' +
                        '＆LT; / UL＆GT;' +
                '＆LT; D​​IV＆GT;';    返回{
        限制：'E'，
        更换：真实，
        适用范围：{标题：@title}，
        模板：TMPL，        控制器：['$范围，$元素，$ ATTRS'，'$ transclude'，
          功能（$范围，$元，$ ATTRS，$​​ transclude）{
              $ scope.name =MYNAME;
              $ scope.text ='';              $ scope.sendMessage =功能（）{
                  chat.sendMessage（$ scope.name，$ scope.text）;
                  $ scope.text ='';              };          }]，    };
}]）;
 

解决方案

您正在使用 ngRepeat 在 chat.messages 但从来没有分配聊天成为 $范围部分。

 控制器：'$范围，$元素，$ ATTRS'，'$ transclude'，
      功能（$范围，$元，$ ATTRS，$​​ transclude）{
          $ scope.name =MYNAME;
          $ scope.text ='';
          $ scope.chat =聊天; //＆LT;  - 这让你可以使用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指令编译功能，从服务NG-重复元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！