ng-repeat 和 ng-scrollbar 不能一起工作

Question

我刚开始 Angular JS 并尝试在列表中添加一个元素时出现滚动条，该元素将填充到内容框中。我从这里安装了 ng-scrollbar。 https://github.com/asafdav/ng-scrollbar

HTML:

  <link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
  <style>
    .scrollme {
      max-height: 100px;
    }
  </style>
</head>
<body>

<div ng-app="DemoApp">
  <div class="container" ng-controller="DemoController">
    <table border="0" width="100%">
        <div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
            <tr>
                <th width="2%"></th>
                <th width="14%">Name</th>
                <th width="85%">Address</th>
            </tr>
            <tr>
                <td>
                    <img src="addImageButton.png" ng-click="addRow()" />
                </td>
                <td class="inlineBlock">
                    <input type="text" ng-model="row.name" />
                </td>
                <td>
                    <input ng-model="row.addr" />
                </td>
            </tr>


            <tr ng-repeat="row in rowList">
              <td>
                <img src="removeImageButton.png"ng-click="removeRow($index)" />
              </td>
              <td>{{row.name}}</td>
              <td>{{row.client}}</td>
            </tr>
        </div>
      </table>
  </div>
 </div>
</body>

JavaScript:

(function () {
  'use strict';

  var app = angular.module('DemoApp', ['ngScrollbar']);
  app.controller('DemoController', DemoController);
  function DemoController($scope) {
    // portfolio and broker tabs
    $scope.row = {}
    $scope.row.name = "";
    $scope.row.addr = "";
    $scope.rowList = [];

    // adding a row to list
    $scope.addRow = function() {
      var data = {};
      data.name = $scope.row.name;
      data.addr = $scope.row.addr;
      $scope.rowList.push(data);
      $scope.row.name = "";
      $scope.row.addr = "";
      console.log($scope.rowList);
    }

    // removing a row from the list
    $scope.removeRow = function(obj) {
      console.log('end' + $scope.rowList);
      if(obj != -1) {
        $scope.rowList.splice(obj, 1);
      }
    }

    $scope.$on('scrollbar.show', function(){
        console.log('Scrollbar show');
      });

      $scope.$on('scrollbar.hide', function(){
        console.log('Scrollbar hide');
      });

//      $scope.$on('loopLoded', function(evt, index) {
//        if(index == $scope.me.length-1) {
//            $scope.$broadcast('rebuild:me');
//        }
//      });

  }

})();

它是我代码的一部分，所以它可能没有完全意义。但它的工作方式是，如果我按下 addImageButton，它会添加一行，这将在网络上添加一行。相反，removeImageButton 将删除一行，该行将立即显示在网络上。一旦达到 100px 的高度，我需要出现一个滚动条。我检查了 ng-scrollbar is not working with ng-repeat 的最后一个答案也一样，但没有用。如果我能在详细解释方面得到一些帮助，那就太好了。 :) 谢谢！

Answer 1

想通了！我需要将广播方法放在 addRow 和 removeRow 方法中。另外，我不得不从

中取出

ng-repeat 和 ng-scrollbar 不能一起工作

ng-repeat and ng-scrollbar doesn't work together

html

javascript

scrollbar

angularjs

ng-repeat