angularjs - 在指令和 $compile() 中使用 ng-click 中的变量

Question

我正在尝试编写一个将创建一组按钮的指令。为了在屏幕上突出显示数据，这些按钮将用作开/关切换。

该指令如下：

angular.module('directives', [])
.directive('toggleButtons', function() {
  return {
    restrict: 'E',
    scope: { data: '='},
    controller: function($scope) {
      $scope.toggle = function(data) {
        alert(data);
      };
    },
    template: "<button class='btn' " +
              //"ng-class='{active: option == model}'" +
              "ng-repeat='datum in data' " +
              "ng-click=\"toggle({{datum['id']}})\">{{datum['name']}}" +
              "</button>"
  };
});

现在，我知道要确保该datum['id'']片段由 Angularjs 解释，我需要运行$compile()，但我不确定如何实现这一点。请有人可以展示如何更改此代码以实现此目的吗？（同样，如果这不是解决此问题的正确方法，请告诉我）。谢谢！

Answer 1

你真的很亲近。您不需要将datum['id']调用包装在花括号中，因为 Angular 会为您编译模板。

因此，如果您将其更改为ng-click='toggle(datum.id)'，它将正常工作，如您在此处看到的那样。

Answer 2

I am meeting a similar issue that the variable is undefined after using $compile(template)($scope);

For example:
1: var pendingObjDiv = $("<div class="open-detail-btn" ng-click="goToFormPage(aaa)"></div>");
2: var pendingTemplate = angular.element(pendingObjDiv);
   var pendingElement = $compile(pendingTemplate)($scope);
   pendingRowList.append(pendingElement);
3: $scope.goToFormPage = function(str){}; at this step, the variable str is undefined.