Using Variables in ng-click in a Directive and $compile()

Question

Using Variables in ng-click in a Directive and $compile()

I'm attempting to write a directive that will create a set of buttons. The buttons will act as on/off toggles for the purposes of highlighting data on-screen.

The directive is as follows:

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

Now, I understand that to ensure that the datum['id''] piece is interpreted by Angularjs I need to run $compile(), but I'm not sure how to implement this. Please could someone show how to alter this code to achieve this? (Equally, if this is not the right way to go about this please let me know). Thanks!

angularjs
angularjs-directive

Answer 1

You're really very close. You don't need to wrap the datum['id'] call in curly braces, because angular compiles the template for you.

So if you just change it to ng-click='toggle(datum.id)', it will just work, as 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.