无法在ng-repeat中绑定click事件

Question

我想展示一个简单的例子

＆＃13;

＆＃13;

var app =angular.module('myApp',[]);
app.directive('callapi', function($compile, $rootScope) {
    return {
        restrict: 'A',
        replace: false,
        terminal: true,
        priority: 1000,
        compile: function compile(element, attrs) {
            element.bind('click', function() {
             alert('clicked');
            });
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {},
                post: function postLink(scope, iElement, iAttrs, controller) {
                    $compile(iElement)(scope);
                }
            };
        }
    };
});
app.controller('myController',function($scope){
	$scope.simpleList = [1,2,3]

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=myApp>
  <div ng-controller='myController'>
    <table>
      <button callapi='api/user'>outerNgRepeat</button>
      <tr ng-repeat='r in simpleList'>
        <td>r</td>
        <td>r</td>
        <td><button callapi='api/user'>innerNgRepeat</button></td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但有一个问题

我曾尝试将click事件绑定到指令中的元素上，但是当它处于ng-repeat时它不起作用。 如何绑定点击ng-repeat中的元素？

Answer 1

您不希望将compile阶段中的事件绑定到ng-repeat块内的事件。
实际上，我认为你在compile阶段没有任何关于该特定指令的事情：我认为你应该只使用link回调。

另外，你得到的错误：

  

超出最大调用堆栈大小

...指的是$compile在你的指令的post - 链接钩子中使用var app = angular.module('myApp', []); app.directive('callapi', function($compile, $rootScope) { return { restrict: 'A', replace: false, terminal: true, priority: 1000, link: function(scope, element) { element.bind('click', function() { console.log('clicked: ' + scope.r); }); } }; }); app.controller('myController', function($scope) { $scope.simpleList = [1, 2, 3]; });的（递归）。

查看下面的代码段，由您更新：

table {
    border: 1px solid black;
    border-collapse: collapse;
}

tr:not(:last-child) {
    border-bottom: 1px solid #ddd;
}  

tr:hover {
  background-color: #f5f5f5;
}

th, td {
    padding: 2px 15px;
    text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app=myApp>
  <div ng-controller='myController'>
    <table>
      <button callapi='api/user'>outerNgRepeat</button>
      <tr ng-repeat='r in simpleList'>
        <td>r</td>
        <td>r</td>
        <td>
          <button callapi='api/user'>innerNgRepeat</button>
        </td>
      </tr>
    </table>
  </div>
</div>

import numpy as np
px=np.linspace(0,1,100)
py=px
import matplotlib.pyplot as plt
import matplotlib.colors as colors
startcolor = '#FFFFFF'  # white
midcolor = '#FEDB8B'    # yellow
endcolor = '#FE9272'    # Orange
endcolor2 = '#723472'    # Purpple
colorsforCmap=[startcolor,midcolor,endcolor,endcolor2]
cmap2 = colors.LinearSegmentedColormap.from_list('own2',colorsforCmap)
plt.cm.register_cmap(cmap=cmap2)
plt.rcParams["figure.figsize"] = [12,9]
heatmap, xedges, yedges = np.histogram2d(px, py, bins=(100, 100))
plt.clf()
plt.imshow(heatmap.T, origin='lower',cmap=cmap2)
plt.show()