Как включить данные/область с контроллера в динамически добавленную директиву?

Question

Я пытаюсь понять, как включить область действия с директивой, которую я добавляю к dom в событии click в контроллере.

Шаг 1. На событие щелчка, вызвать функцию в мой контроллер, который добавляет директиву, как этот

$scope.addMyDirective = function(e, instanceOfAnObjectPassedInClickEvent){ 
    $(e.currentTarget).append($compile("<my-directive mydata='instanceOfAnObjectPassedInClickEvent'/>")($scope)); 

} 
    //I'm trying to take the `instanceOfAnObjectPassedInClickEvent` and make it available in the directive through `mydata` 

выше, часть из которых я получил from this SO answer, успешно добавляет директиву (и директивы имеет шаблон, который добавляется в dom), однако внутри директивы я не могу получить доступ к каким-либо данным области mydata, это говорит о том, что это undefined.

Моя директива

app.directive('myDirective', function(){ 

    return { 
     restrict: 'AE', 
     scope: { 
     mydata: '=' 
     //also doesn't work if I do mydata: '@' 
     }, 
     template: '<div class="blah">yippee</div>', 
     link: function(scope,elem,attrs) { 
       console.log(scope) //inspecting scope shows that mydata is undefined 
     } 
    } 
} 

Update Я изменил имя datafromclickedscope в OP, чтобы сделать его более ясным. В действии контроллера addMyDirective (см. Выше) instanceOfAnObjectPassedInClickEvent - это экземпляр объекта, переданного в метод контроллера, в событие щелчка, которое я пытаюсь передать в директиву как mydata='instanceOfAnObjectPassedInClickEvent'. Однако, даже если я изменяю = на @ в директиве, и я пытаюсь получить доступ к scope.mydata в функции ссылки директивы, он просто показывает строку, подобную этой "instanceOfAnObjectPassedInClickEvent", а не фактические данные объекта, доступные мне в моем методе который обрабатывает событие click

Answer 1

При использовании mydata='instanceOfAnObjectPassedInClickEvent' в шаблоне необходимо, чтобы instanceOfAnObjectPassedInClickEvent был определен в $ scope. Поэтому перед компиляцией вы должны назначить переменную в $ scope. Я переименую эту переменную в код ниже, так что те же имена не будут вас путать, и было бы ясно, что формальный параметр функции не может быть виден в шаблоне.

$scope.addMyDirective = function(e, instanceOfAnObjectPassedInClickEvent){ 
    $scope.myEvent = instanceOfAnObjectPassedInClickEvent; 
    $(e.currentTarget).append($compile("<my-directive mydata='myEvent'/>")($scope)); 
} 

EDIT: слегка адаптированный jsfiddleне используя JQuery не манипулировать DOM