将jQuery转换为Angular并优化性能(Convert jQuery to Angular and optimize performance)

 我找到了漂亮的“控制台之类”窗口 - http://demos.telerik.com/kendo-ui/autocomplete/events （开始输入框），我正在尝试创建Angular版本。 
 
 我的代码如下所示： 
 
angular.module('myApp', [])
  .directive('console', ['$rootScope', function($rootScope) {
    return {
      restrict: 'E',
      template: [
        '<div class="console animated">',
        '<div ng-repeat="event in events" ng-class="{\'error\': event.type == \'error\', \'log\': event.type == \'log\'}">{{event.data}}</div>',
        '</div>'
      ].join(''),
      link: function($scope, element) {

        $scope.events = [];

        $rootScope.$on('Log', function(event, data) {
          //console.log(event, data);
          $scope.events.splice(0, 0,{
            type: 'log',
            data: "Log :: "+data
          });
        });

        $rootScope.$on('Error', function(event, data) {
          //console.log(event, data);
          $scope.events.splice(0, 0,{
            type: 'error',
            data: "Error :: "+data
          });
        });
      }
    };
 
 我可以通过调用以下方法将项添加到我的控制台： 
 
$rootScope.$emit("Error", "Something bad happened");
 
 这是我目前的版本： https ： //plnkr.co/edit/iLZKa8hPCBSRDV0dhn15？p = preview 
 
 最重要的是原始的jQuery版本，在Angular版本的底部。 
 
 我缺少的是事件聚合： 
 
  
 
 原始版本是灌浆条目和添加计数器是同一事件发生一次更多。 
 
 如何将其添加到我的代码中（Angular方式）？ 
 
 除了转换，我还有两个问题我想问： 
 - 这是我写的第一个指令之一，如果我犯了任何错误，请告诉我。 
 - 这个“控制台”将显示许多事件，我想知道如何优化它 - 我应该只显示最近20个条目，还是可以添加虚拟滚动等功能来优化它？ 

I found nice looking "console like" window - http://demos.telerik.com/kendo-ui/autocomplete/events (start typing in box) and I'm trying to create Angular version.
 
My code looks like this:
 
angular.module('myApp', [])
  .directive('console', ['$rootScope', function($rootScope) {
    return {
      restrict: 'E',
      template: [
        '<div class="console animated">',
        '<div ng-repeat="event in events" ng-class="{\'error\': event.type == \'error\', \'log\': event.type == \'log\'}">{{event.data}}</div>',
        '</div>'
      ].join(''),
      link: function($scope, element) {

        $scope.events = [];

        $rootScope.$on('Log', function(event, data) {
          //console.log(event, data);
          $scope.events.splice(0, 0,{
            type: 'log',
            data: "Log :: "+data
          });
        });

        $rootScope.$on('Error', function(event, data) {
          //console.log(event, data);
          $scope.events.splice(0, 0,{
            type: 'error',
            data: "Error :: "+data
          });
        });
      }
    };
 
And I can add item to my console by calling:
 
$rootScope.$emit("Error", "Something bad happened");
 
Here is my current version: https://plnkr.co/edit/iLZKa8hPCBSRDV0dhn15?p=preview
 
On top is original jQuery version, on bottom in Angular version.
 
The thing I'm missing is event aggregation:
 
 
Original version is groupping entries and adding counter is same event occures more that once.
 
How can I add this to my code (Angular way)?
 
Besides conversion I have two more questions I'd like to ask:
 -This in one of my first directives I'm writing, if I'm making any mistakes in it please let me know.
 -This "console" will show many events and I'd like to know how to optimize it - should I show for example only last 20 entries or can I add functionality like virtual scroll to optimize it a bit?

原文：https://stackoverflow.com/questions/36054240