javascript - 如何一起使用继承作用域和隔离作用域

Question

我有需要排序的 html 表格。

<table>
    <thead>
        <tr>
            <th custom-sort-one order="'Name'" >Name</th>               
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Name_AAA</td>               
        </tr>           
    </tbody>
</table>

因此，我创建了自己的指令，名为 customSortOne。

app.directive("customSortOne", function() {
  return {
    restrict: 'A',
    transclude: true,
    /// Isolated scope
    scope: {
      order: '='
    },
    template: '<a href="#" ng-click="sort_by(order)" style="color: #555555;"><span ng-transclude></span></a>',
    link: function(scope) {
      scope.sort_by = function(ColumnToSort) {
        console.log("ColumnToSort =", ColumnToSort);
        /// Below function cannot be called because it is in isolated scope.
        scope.TestFunction();
      };
    }
  }
});

指令工作，当用户单击Name列标题时，名为sort_by的函数知道需要对哪一列进行排序。
问题是它无法调用 Controller 中编写的父作用域的函数。
所以我使用 inherited scope 更改我的指令.

app.directive("customSortTwo", function() {
  return {
    restrict: 'A',
    transclude: true,
    /// Inheritance scope
    scope: true,
    template: '<a href="#" ng-click="sort_by(order)" style="color: #555555;"><span ng-transclude></span></a>',
    link: function(scope) {
      scope.sort_by = function(ColumnToSort) {
        /// ColumnToSort is undefined which is not what I want
        console.log("ColumnToSort =", ColumnToSort);
        /// Below function can be executed because I changed to Inheritance scope.
        scope.TestFunction();
      };
    }
  }
});

最后我可以调用父作用域，但问题是我无法将值作为参数赋予 sort_by 函数。

Plunker

Answer 1

你可以稍微修复一下你的 link function .

该函数有几个参数:范围、元素、属性等。

因此，您只能看到所需属性的值

link: function (scope,elem, attrs) {
    scope.order = attrs.order; 

当然，这适用于静态属性值，在这种情况下不需要引号。
Updated Plunkr

更新:至于第一个函数:您可以从父作用域调用函数，也可以像这样传递它

<th custom-sort-one order="'Name'" func="TestFunction()" >Name</th> 

并在指令中使用&

& or &attr - provides a way to execute an expression in the context of the parent scope.