Использование переменных в ng-click в директиве и $ compile()

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'] в фигурные скобки, потому что угловой компилирует шаблон для вас.

Так что, если вы просто измените его на 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.