AngularJs会规范化一个元素的标签名和属性名，以便确定哪一个元素匹配到哪一个指令。一般来说，在js中是通过使用规范化后的驼峰式的名字来引用指令(比如ngModel)。在HTML中常常使用'-'划定的属性名字来调用指令[5]  (比如说ng-model)

AngularJs的自定义指令，通过scope（作用域），controller(控制器)，link(监听器),template(变换区)在自定义指令内部构建了一个小的MVC架构，以适应开发者自行配置所需的操作和计算[5]  。

AngularJs组件提供了使用标记语言来声明控件的能力。声明标记很好地遵循了MVVM设计模式，可以完全通过View（标记语言）来配置组件。本系统中的自定义表格控件就是在这一技术基础上完成实现的[5]  。

AngularJs最具生产力的好处是绑定表达式，这允许开发者创建的控件可以自动地响应数据更改，使开发者从繁琐的事件处理程序和DOM操作中解放出来。本系统中表格控件所有的属性都支持数据绑定，另外还为一些需要双向数据绑定的属性提供双向绑定。开发者不需要在自定义表格指令之外编写任何代码，可以自由绑定组件以处理事件和与Model交互数据[5]  。 

在自定义指令实现的表格控件中，规范数据来源来自两个方面：参数和表格属性。参数是指来源于数据库的实验器材参数，它作用在选择框、公式之中，表格属性则确定了生成表格的具体样式，包括行列、宽度、数据格式（输入类型、日期类型、选择值、公式结果等）。并将表格显示分为多种状态：编辑状态、填写状态、查看状态、计算状态。其中，编辑状态确定了表格中大部分关联数据的设定，是将多个模块组合成一个流程的重要过程；填写状态只提供数值填写的操作，由公式引起的计算交由表格自主完成；查看状态不能对表格进行操作，只能观测表格的最终结果；计算状态将显示查看状态所隐藏的不确定度计算结果，以适应具体实验操作流程。

在表格的具体创建上，本系统的自定义指令实现了类似Excel表格的界面展示。

图3-1 自定义模块的属性设置

如图3-1，系统以模块为单位创建表格，对表格中的元素规定其所在行、是否可见、宽度、数据来源等属性。自定义指令会分析这些属性元素，在表格中赋予相对应的属性。例如，显示所在行是确定该单元格所处在的表格位置，宽度确定了单元格的具体宽度，数据来源确定了单元格获取数据的方式。

图3-2 模块表格化展示

如图3-2，显示了模块的表格化，显示行数相同的元素转化为同一行的单元格，数据来源不同的元素，在单元格中数值显示也不相同，录入对应输入框，参数表对应下拉列表，公式对应具体数值。

公式的解析是系统的一处重要设计，由于创建公式存在差异，需要使用统一的方法对公式进行解析，计算出正确的结果。

图3-3 公式创建示意图

如图3-3是示例模块中浓度的创建公式，解析该公式时，以运算符号为界，运算符左右即为参与运算的变量值，将非数字的变量值按照格式进行解析，可以分为参数表来源和参数来源，参数表来源需要关联该模块中的其他使用了相同参数表的数值，对比取出同一行数据对应公式中的列数据;参数来源来自同一模块中存在的元素值。最终解析公式时，先将公式中的变量一一对应为具体数值，转换完成后，对仅包含数字和运算符的公式进行运算解析，解析规则按照普通的四则运算规则，先乘除后加减。如图3-4显示的“浓度”即为公式运算后的结果。

图3-4 模块填写展示