从隔离作用域访问父作用域

Question

我正在尝试编写attribute指令，它包装元素，并用一些其他的东西来装饰它，以及附加的指令。我需要保持元素内部的内容完好无损。如下所示：

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)

标记：

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

现在这个东西根本不起作用了，它不会呈现h2部件，因为现在uglyname对于当前作用域是未知的。我可以通过传递父作用域来编译它，但是它完全破坏了我的控制器。(参见下面的jsbin )所以我必须以某种方式编译应用父作用域的元素的内容，将其添加到模板中，然后再次编译应用局部作用域？或者我需要找到一种方法来继承父作用域的属性？或者我不能用attribute指令来做？也许我需要使用元素指令和转换？有什么想法吗？

jsbin

Answer 1

我会按照@marfarma建议的那样做，并将html更改为不包含括号，因此：

 scope: { niceName: "="},

和

 nice-name="uglyname"