Angularjs Angular指令：具有父变量的子模板

我试图弄清楚指令是如何工作的。我想对表进行排序，但我对child指令有问题。我不知道如何使用父指令中使用的变量。 （代码是用coffeescript编写的）

查看HTML

<table extend-table table-params="tableParams">
    <thead>
       <tr>
         <th field="number">Number</th>
         <th field="name">Name</th>
       </tr>
</table>

父指令：我解析所有th，用字段attr选择th，并将子指令添加到其中

class ExtendTable
  constructor: ($compile) ->

     link = (scope, element, attrs) ->
        angular.forEach element.find('th'), (th) ->
           th = angular.element(th)

           if th.attr("field")
              field = th.attr("field")

              th.append $compile('<sort-column></sort-column>') scope

              th.bind 'click', () ->
                 if scope.tableParams.field != field
                     scope.tableParams.field   = field
                     scope.tableParams.sorting = 'asc'
                 else
                     if scope.tableParams.sorting == 'asc'
                         scope.tableParams.sorting = 'desc'
                     else
                         scope.tableParams.sorting = 'asc'

     return {
       restrict: 'A'
       scope: true
       link
     }
@myApp.directive 'extendTable', ['$compile', ExtendTable]

类可扩展
构造函数：（$compile）->
链接=（范围、元素、属性）->
angular.forEach元素。查找（'th'），（th）->
th=角度元素（th）
如果该属性（“字段”）
字段=属性（“字段”）
th.append$compile（“”）作用域
绑定“单击”，（）->
如果scope.tableParams.field！=领域
scope.tableParams.field=字段
scope.tableParams.sorting='asc'
其他的
如果scope.tableParams.sorting==“asc”
scope.tableParams.sorting='desc'
其他的
scope.tableParams.sorting='asc'
返回{
限制：“A”
范围：真
链接
}
@myApp.directive'extendTable'，['$compile'，extendTable]

子指令：tableParams.field是已排序的列，field是已单击的列

class SortColumn

  constructor: () ->
    return {
      restrict: 'E'
      scope:true
      require: '^extendTable'
      template: '<div class="pull-right">
                   <i ng-class="{
                         \'fa\':true, 
                         \'fa-sort\':scope.tableParams.field!=field, 
                         \'fa-sort-asc sort-active\':scope.tableParams.field==field&&scope.tableParams.sorting==\'asc\', 
                         \'fa-sort-desc sort-active\':scope.tableParams.field==field&&scope.tableParams.sorting==\'desc\'}"
                   ></i>
                 </div>'
    }
@myApp.directive 'sortColumn', [SortColumn]

class-SortColumn
构造函数：（）->
返回{
限制：“E”
范围：真
要求：“^extendTable”
模板：'
'
}
@myApp.directive'sortColumn'，[sortColumn]

---

谢谢你的帮助

或者不要创建一个独立的作用域（

scope:true

->

scope:false

），然后您可以通过

tableParams

在ng类中访问（您不必使用作用域）。如果作用域为false，则其引用将指向父作用域。 如果离开

范围：true

，则可以使用

$parent.tableParams

访问父范围变量。

---

您正在ng类中使用未分配给任何范围的

字段

。它是迭代中的局部变量，此处不可访问。您必须将其分配给作用域或子作用域。

谢谢您的回答。我改变了方法，现在效果很好。我只需要时间来正确理解angular的指令。我的回答对你有用吗？只是问问，因为你没有投票。如果我的解决方案不好，也很乐意与其他人分享，如果他们发现了这个页面，他们可以知道。

class SortColumn

  constructor: () ->
    return {
      restrict: 'E'
      scope:true
      require: '^extendTable'
      template: '<div class="pull-right">
                   <i ng-class="{
                         \'fa\':true, 
                         \'fa-sort\':scope.tableParams.field!=field, 
                         \'fa-sort-asc sort-active\':scope.tableParams.field==field&&scope.tableParams.sorting==\'asc\', 
                         \'fa-sort-desc sort-active\':scope.tableParams.field==field&&scope.tableParams.sorting==\'desc\'}"
                   ></i>
                 </div>'
    }
@myApp.directive 'sortColumn', [SortColumn]