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>"
  };
});

现在，我理解为了确保Angularjs解释datum['id'']部分，我需要运行$compile()，但我不确定如何实现它。请有人能说明如何更改此代码以实现此目的吗？（同样，如果这不是正确的方法，请告诉我）。谢谢！

Answer 1

你真的很亲密。你不需要用花括号包裹datum['id']调用，因为angular会为你编译模板。

因此，如果您只是将其更改为ng-click='toggle(datum.id)'，它就会起作用you can see here。

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.

在指令中使用ng-click和$ compile（）中的变量

2 个答案: