示例项目和用例 > 用例:3D-Guided Service Instructions > 3D-Guided Service Instructions 201:使用 JavaScript 突出显示零件并创建 Ionic 弹出窗口 > 向模型的弹出窗口添加属性
  
向模型的弹出窗口添加属性
成功创建 Ionic 弹出窗口后,可以添加针对本项目的 3D-Guided Service Instructions 101 部分在 Creo Illustrate 中创建的属性元数据。此操作通过 PTC Metadata API 来实现,该 API 现已包含在 Vuforia Studio 8.5.13 及更高版本中。
* 
如果您希望了解当前的进展,可以在 GitHub 上的 Appendix 5 中找到本部分的完整代码进行比较。
1. 使用 PTC Metadata API 从模型的 JSON 数据中调用相关属性。此版本 API 使用 .then 方法,即在存在模型元数据的情况下使用回调函数来检索数据。
a. 导航至 Home.js 并在 userpick 函数下面直接添加以下代码:
//
//Look at model and see if it has metadata. If it does, then execute the below code and create an object called metadata
PTC.Metadata.fromId(targetName)
.then ( (metadata) => {
* 
如果不在步骤 c 中添加结束括号,则会出现一条错误消息。
b. 选中第 12-41 行并单击“缩进”按钮将其缩进。这些行将会放到上述 PTC API 中,因为它们依赖于 promise 成功执行。
c. 将以下代码添加到第 43 行,为 PTC API 函数添加结束括号。这样可以确保不会留下错误或未完成的行。
}) //end brackets for PTC API and .then
//
//catch statement if the promise of having a part with metadata is not met
.catch( (err) => { console.log('metadata extraction failed with reason : ' +err) })
2. 要从元数据属性中发现数据,需要为 PTC Metadata API 使用 get 函数。调用 metadata.get 会检索模型的所有元数据,在此例中,元数据由在 Creo Illustrate 中添加的零件属性构成。使用 pathID 变量(其中包含该零件的具体值数据)可使 metadata.get 函数索引选定零件的数据。有关元数据 API 函数的完整列表,请参阅将 CAD 元数据合并到体验中。此函数用于获取以下变量的值:
零件的显示名称
操作说明名称
零件号
$scope.currentSelection 变量下面添加以下代码:
//
// create variables based on attribute names from Creo Illustrate for this model. use metadata.get to obtain the data from the JSON properties for this occurrence.
var partName = metadata.get(pathId, 'Display Name');
var instructionName = metadata.get(pathId, 'illustration');
var partNumber = metadata.get(pathId, 'partNumber');
3. 更改弹出窗口 template 特性的定义。现在,属性数据已导入到 Vuforia Studio,在用户单击零件时,Ionic 弹出窗口应会显示 partNumberpartName 变量值。备注部分也已经过编辑以包含更多信息:
//
// adds an ionic popup when a part is clicked. Show the part number and name of the selected object.  &nbsp;</br> adds a line break between the two variables
var popup = $ionicPopup.show({
template: '<div>' + partNumber + ' &nbsp;</br>' + partName + '</div>',
scope: $scope
}); //end of ionic popup
4. 单击“保存”并打开“预览”,验证新信息已添加到弹出窗口中。如果显示的图像类似下图所示,则说明此步骤已正确完成。
5. 在下一节中,您将创建并绑定“播放”和“重置”按钮