Dostęp do nadrzędnego zakresu z izolowanego zasięgu - angularjs

Próbuję to napisać dyrektywę atrybutówowija element i ozdabia go innymi rzeczami wraz z dodatkowymi dyrektywami. I muszę zachować nienaruszoną zawartość wewnątrz elementu. Coś takiego:

app.controller "myCtrl", ($scope)->
$scope.name = "Gwendolyn"

app.directive "niceName",($compile)->
restrict: "A"
replace: yes
scope: niceName:"="
template: (element, attrs)->
"<div>
<div style="background:lightgray">
#{element.html()}
</div>
<div>
<h1>{{nice}}</h1>
</div>
</div>"

controller: ($scope, $element)->
$scope.$watch "hover",->
$scope.nice = if $scope.hover then $scope.niceName else ""

compile:(element, attrs)->
element.attr("ng-mouseover","hover = true")
element.attr("ng-mouseout","hover = false")
element.removeAttr("nice-name") # removing itself to avoid from falling into infinite loop

pre:(scope, iElement, iAttrs)->
$compile(iElement)(scope)

Narzut:

<div nice-name="uglyname">
<h2>{{uglyname}}</h2>
<div>

Teraz ta rzecz w ogóle nie działa, nie renderuje się h2 po części dlatego, że teraz uglyname jest nieznany w obecnym zakresie. Mogę go skompilować z przekazaniem zakresu nadrzędnego, ale wtedy całkowicie psuje mój kontroler. (patrz jsbin poniżej) Więc jakoś muszę skompilować zawartość elementu stosującego zakres nadrzędny, dodać go do szablonu, a następnie ponownie skompilować stosując zakres lokalny? Czy muszę znaleźć sposób na dziedziczenie właściwości zakresu nadrzędnego? Czy też nie mogę tego zrobić za pomocą dyrektywy atrybutów? Może muszę użyć dyrektywy elementu i transkluzji? Jakieś pomysły?

jsbin

Odpowiedzi:

zrobiłbym to, co sugerował @marfarma, a także zmieniłbym twój HTML, aby nie zawierał nawiasów, więc:

 scope: { niceName: "="},

i

 nice-name="uglyname"