javascript - 如何将参数传递给 Angular 中的 ng 事件处理程序？

Question

我有一段代码是这样的:

Module.Article.directive('article', function ($compile) {
 return {
    restrict: 'C',
    link: function (scope, element, attrs) {

    var el = angular.element('<div></div>');

    scope.showNum = function(i){
      console.log(i);
    };

    for (var i = 1; i <= 5; i++) {
      el.append('<span ng-mouseover="showNum(i)">' + i + '</span>');
    }

    $compile(el)(scope);
    element.append(el);
}

我想得到这个结果:

<div>
  <span ng-mouseover="showNum(1)">1</span>
  <span ng-mouseover="showNum(2)">2</span>
  <span ng-mouseover="showNum(3)">3</span>
  <span ng-mouseover="showNum(4)">4</span>
  <span ng-mouseover="showNum(5)">5</span>
</div>

但我却得到这样的结果:

<div>
   <span ng-mouseover="showNum(i)">1</span>
   <span ng-mouseover="showNum(i)">2</span>
   <span ng-mouseover="showNum(i)">3</span>
   <span ng-mouseover="showNum(i)">4</span>
   <span ng-mouseover="showNum(i)">5</span>
</div>

有人知道如何将 i 传递给 showNum() 处理程序吗？

Answer 1

把它改成这样，所以打印实际的 i 变量而不是字母 i:

Module.Article.directive('article', function ($compile) {
 return {
    restrict: 'C',
    link: function (scope, element, attrs) {

    var el = angular.element('<div></div>');

    scope.showNum = function(i){
      console.log(i);
    };

    for (var i = 1; i <= 5; i++) {
      el.append('<span ng-mouseover="showNum(' + i + ')">' + i + '</span>');
    }

    $compile(el)(scope);
    element.append(el);
}

编辑:我同意其他答案提供了更大的灵 active ，但这个答案指出了提出问题的人在尝试实现问题的方式中的一个小错误。