javascript - AngularJS 指令、范围、魔法和重复模板

Question

所以，我正在运行 Angular.js 1.6.5，并且我正在尝试创建一个“shell”指令，如下图^† 希望能够帮助描述。

_{†​​ — 这只是我希望最终结果所代表的一个示例。 该图像来 self 现有的工作，但所有代码当前均已编写到位，只有一些基本控件包含在指令中以实现可重用性。}

• 蓝色是外部作用域，是任意页面的应用程序 Controller 作用域/模板。
• 红色的是<table-view> “shell”指令，旨在提供公共(public)控件/行为的可重用性。
• 绿色是生成的内容，一个表格，其列由 <column> 定义<table-view> 的子元素指令。

我的目标是让我可以定义 <column> HTML 片段(也许还有一些 <header> 控件)和 <table-view>负责迭代 records (在本例中绑定(bind)并观看 $ctrl.users)并根据 <column> 显示迭代内容定义。

需要注意的是，控件(例如在最后一列中定义的)应使用魔术 $ctrl 绑定(bind)到外部范围 ( $record )表示迭代中当前项的变量。这是为了允许外部作用域处理当单击给定 $record 的“查看”或“编辑”按钮时发生的情况。 .

分页控件将“嵌入”<table-view>指令，并提供& - 绑定(bind)属性以在外部范围上触发事件。这(与绑定(bind)的 <header> 控件一起)允许外部范围为 $watch进行更改并更新 $ctrl.users动态收集(当搜索/查询选项更改或页面更改时)

无论如何，我不是在寻找众包代码，但我无法弄清楚从哪里开始。我知道 template 之间可以实现很多魔法。/compile/link方向插头，但我需要有人把我推向正确的方向。

<小时/>

编辑@Claies

In your question you say that you only have some basic directives for re-usability, but you don't really explain what these "basic directives" are.

这指的是组选择器、排序选择器和分页器控件等。它们很伟大，但它们只是树上的叶子；它们不提供可溶性。

...the data is typically immutable, and changes at the bottom are only pushed up through the events. The parent component isn't responsible for knowing what the child components are doing, and doesn't watch for the child to change things; instead it waits for the child to tell it that something should be updated.

这就是我的目标，也是我目前采用的策略；我用<尽可能绑定(bind)读取数据，并支持 &绑定(bind)事件驱动的更改通知以推送更改。

在示例图像中，搜索、组选择器、排序选择器和分页控件(红色)都会调用对父范围(蓝色)的更改回调，并通过以下方式传回:

onUpdateFilter: '&'

然后父作用域(同样是蓝色)负责更新 $ctrl.users 中的记录。相应地，该数据被传回:

records: '<'

因此，简而言之，假设的指令将具有以下范围:

scope: {
    records: '<',       // one-way in
    onUpdateFilter: '&' // events out
}

filter对象，其属性绑定(bind)到各种控件(搜索、组选择器等)，更新如下:

$scope.$watch('$ctrl.filter', updateFilter, true);

function updateFilter() {
    $ctrl.onUpdateFilter({ filter: $ctrl.filter });
}

从而允许(蓝色)包含范围 Hook 到指令(红色)filter 的句柄更改。更改后，重新查询数据并通过 records 传回.

我的示例显示了嵌入的内容直接绑定(bind)到外部范围(假设这是可能的)，但使用事件策略也是如此。

我遇到的问题但是，实际上只是了解如何通过嵌入处理各种范围和编译阶段。

Answer 1

它几乎太宽泛了，但我会尝试分享我配置表格的经验。

所以我的目标是制作一个动态 TableView ，它可以使用选项进行配置，这样我就不必每次都编写 HTML 代码，也不必使用大量属性来传递数据和回调功能。

$scope.tableOptions = {
  search: search, // function (text, skip, take)
  sort: sort, // function (dbName, direction, skip, take)
  columns: [
    {
       name: 'Id', // for header use
       sortable: false,
       dbName: 'id', // for db sorting/filtering use

       // display type 1, only display the data, no need to customize
       data: 'id', // attribute name in json data

       // display type 2, text processing before display
       data: function(data, index, row) {
         return (data / row.total) * 100 + '%';
       }

       // display type 3, pass in template
       dataHtml: "read <span class='red'>now!</span>",

       // display type 4, action
       dataAction: {
         icon: 'glyphicon-edit',
         label: 'Edit',
         callback: editUser // function (row)
       }
    }
  ]
}

因此表指令将处理外层，例如搜索和排序功能，这就是您已经在做的事情。

表格模板:

<table>
  <tr>
    <th ng-repeat='column in option.columns'>
      {{column.name}}
      <th-sort option='column'></th-sort>
    </th>
  </tr>

  <tr ng-repeat='row in data'>
    <column ng-repeat='column in option.columns' option='column' data='row'></column></column>
  </tr>
</table> 

然后列指令将按组件样式处理下层。