Question

我有一个角度设置如下，试图模仿一些excel功能，我有一个控制器嵌套在ng-repeat中。

<tr ng-repeat="lw in lw_list"   my-lw   ng-model="lw" 
<td>
        <!-- next two elements act as an excel cell, one for inputing data, they other for displaying calcualtion result -->
        <div ng-controller="MyCellCtrl">
            <input type="text" class="inputdiv" ng-model="lw.library.name"   >in</input>                        
            <div  class="output"   ng-bind="getCellValue(lw.library.name)" syle="postion:absolute" contenteditable="True" >out</div> 
        </div>


        <div ng-controller="MyCellCtrl">
           more input / div pairs to act as a new cell      
           .....
        </div>

</td>

我设置了样式表，以便输入和输出处于相同位置，并隐藏/取消隐藏，以便它们像excel单元格一样（您键入公式，然后当您离开焦点时，它会更新内容）。

无论如何，当我在getCellValue（）函数中放置一个console.log（）时，为了显示正在调用的控制器实例，然后输入一个特定的单元格，我可以看到正在调用getCellValue（）每个细胞。

有没有办法在更新输入时调用getCellValue（）而不在每个实例上调用方法？

（我将此代码基于本教程的代码： https://github.com/graunked/spreadsheet 您可以通过在compute函数中放置console.log来查看相同的行为。如果将数组增加到20 x 20个元素，则在键入任何内容时会开始变慢。）

Answer 1

有没有办法在更新输入时调用getCellValue（）而不在每个实例上调用方法？

<div class="output" ng-bind="foo">

然后使用$watch：

function MyCellCtrl($scope) 
  {
  $scope.foo = $scope.lw.library.name;

  $scope.$watch('foo', function(newValue) {
    $scope.foo = getCellValue($scope.foo);
    });
  }

或使用viewChangeListeners替代：

function MyCellCtrl($scope) 
  {
  $scope.foo = $scope.lw.library.name;

  this.$viewChangeListeners.push(function(newValue) {
    $scope.foo = getCellValue($scope.foo);
    });
  }

<强>参考

Angularjs函数调用嵌套元素的问题

1 个答案: