创建弹出窗口按钮

addToCart 和 disassemble 函数现已创建完毕，需要添加到弹出窗口中以实现交互功能。此外，弹出窗口的模板也将更改，其中需引入零件之间的差异。

1. Add to Cart 按钮连同附加的 addToCart 函数将添加到 price 变量中。之所以将 Add to Cart 按钮添加到 price 变量中，而不是弹出窗口中，是因为按钮仅在零件有关联的价格时才会显示。另外还要将 .close 方法和 hiliteOff 函数与此按钮相关联，用于在单击按钮后关闭弹出窗口并移除着色器。

var price = priceString != undefined ? ' </br>$' + parseFloat(priceString) + ' </div><div ng-click="hiliteOff(); popup.close();addToCart();"> Add to Cart</div>'
: "";

2. 现在，您将编辑弹出窗口的模板，在其中添加 itemCount 应用程序参数、零件价格以及 Continue 按钮。

template: '<div>' + $scope.app.params.itemCount + 'x ' + partNumber +
' </br>' + partName +
price + ' </div>',

b. 弹出窗口模板中将直接添加一个 Continue 按钮。单击此按钮将关闭弹出窗口，不执行任何其他操作。单击此按钮会激活 hiliteoff 函数和 .close 方法。至此，弹出窗口中会有用于向购物车添加零件以及关闭弹出窗口的按钮。

//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x   ' + partNumber +
'  [/br]' + partName +
price +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',

3. 至于分解序列，我们会将其绑定到弹出窗口中的按钮，而不是 2D 界面上的按钮。由于只有某些零件具有分解序列，因此必须创建一条 if else 语句来确定将显示的弹出窗口版本：含有 Add to Cart、Disassembly 和 Continue 按钮的版本，还是仅有 Add to Cart 和 Continue 按钮的版本。if else 语句的两个部分均基于 instructionName 变量的长度。本教程的后续部分将为弹出窗口中的每个按钮添加函数。

a. 对于第一个条件，如果 instructionName 变量的长度为 0，则表示选定零件没有关联的分解序列。如果选定零件没有关联的分解序列，则弹出窗口中不需要 Disassemble 按钮。弹出窗口将仅有 Add to Cart 和 Continue 按钮，这正是弹出窗口的当前状态。在调用弹出窗口的位置的上方添加以下新代码行，并更改弹出窗口变量的作用域，以便可以在 if 语句外对其进行访问。缩进代码以使其在 if 语句内正确排列。

if (instructionName.length == 0) {
//
// adds an ionic popup when a part is clicked. Show the quantity, part number, name, and price of the selected object. </br> adds a line break between the two variables
$scope.popup = $ionicPopup.show({
//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x  ' + partNumber +
' </br>' + partName +
price +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',
scope: $scope
}); //end of ionic popup

}

b. 如果零件有关联的分解序列，则 else 条件将调用适用此情形的弹出窗口，即含有所有三个按钮的弹出窗口：Add to Cart、Disassemble 和 Continue。Disassemble 按钮不仅调用 disassemble 函数，还调用 hiliteOff 和 popup.close。

} else {

//
// adds an ionic popup when a part is clicked. Show the quantity, part number, name, and price of the selected object. [/br] adds a line break between the two variables
$scope.popup = $ionicPopup.show({
//
//template for the popup with added buttons
template: '<div>' + $scope.app.params.itemCount + 'x   ' + partNumber +
' </br>' + partName +
price +
'<div ng-click="hiliteOff();popup.close();disassemble();">Disassemble</div>' +
'<div ng-click="hiliteOff();popup.close();">Continue</div>',
scope: $scope
}); //end of ionic popup if there is a disassembly sequence associated with it

} // end of if statement

a. 单击任一转子可查看对弹出窗口所做的更改。尽管还没有任何样式，但每个按钮均可单击。尝试单击每个按钮，查看它们与模型的交互方式。

c. 最后，单击 PCB。您会注意到，当您单击 PCB 时，不会显示价格，也不会显示将零件添加到购物车的选项。这是因为您先前将 PCB 和电池组合成了单一零件，所以单独的 PCB 没有关联的价格。