Question

我正在尝试编写包含元素的属性指令，并用其他一些东西和其他指令来装饰它。我需要保持元素内容不变。像这样：

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）所以我不得不编译应用父范围的元素的内容，将其添加到模板然后再应用本地范围编译？或者我需要找到一种方法来继承父范围的属性？或者我不能用属性指令做到这一点？也许我需要使用元素指令和转换？有什么想法吗？

jsbin

Answer 1

我会做@marfarma所建议的以及改变你的html而不包括括号所以：

 scope: { niceName: "="},

和

 nice-name="uglyname"

从隔离范围访问父范围

1 个答案: