Question

简化问题

我有一家商店。对于要包含在商店中的产品，需要有一个架子。因此，要向商店添加新产品，工作流程为：

添加一个架子
将产品添加到该货架

（工作流程无法更改）

实现

货架由表中的一行实现，而该行又由Angular.js控制器控制（每个货架是数组中的一个对象）。要添加产品，用户选择＆＃34;创建产品＆＃34;在每行上的下拉菜单中。这将显示一个bootstrap模式，我从控制器为每个可以添加的产品添加了一个选项卡（因为每个产品需要配置:)），然后当用户按下＆＃34;创建＆＃34;模式中的按钮称为JavaScript方法，用于连接REST接口以添加产品（在成功添加产品时，UI将通过从服务器发送的Socket.io事件进行更新。

问题

JavaScript方法（CreateProduct）现在需要影响哪一行（R）以及选择了哪个标签（T）以便＆＃34; onclick＆＃34;按钮的方法是CreateProduct（R，T）; 我目前的解决方案非常丑陋imho，我有两个R和T的全局变量，然后我使用jQuery从模态中捕获show事件和tab事件，下拉列表中的链接有一个字段＆＃34; data-row-id＆＃34;这是识别行

下拉菜单中的HTML（Jade）代码段：

a(data-toggle="modal", href="#createProduct", data-row-id="{{row.RowID}}") Create Product

JavaScript的：

var R = null;
$('#productModal').on('show.bs.modal', function(e) {
    R = $(e.relatedTarget).data('row-id');
});

var T = null;
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    T = e.target.text;
});

我希望有一个更好的解决方案，我可能只是因为缺乏Angular.js的经验而有点过头了，也许有办法通过模型传递这些？也许将这些添加到模态控制器，但是，如何传递行？我的梦想就是按钮代码

 button(type="button", class="btn btn-default", data-dismiss="modal", ng-click="storeCtrl.CreateProduct({{modalCtrl.shelf, modalCtrl.Product)") Create Product

Answer 1

我使用ModalService

找到了一种更好的方法（至少我不需要使用jQuery）

我创建了一个CreateProductModalController，它有一个变量selectedProduct，这是在选项卡中的ng-click事件上设置的

ul(class="nav nav-pills", id="tabContent")
    li(ng-repeat="prod in products", ng-class="{active: $index == 0}", ng-click="activateTab(prod.name)")
        a(href="#{{prod.name}}", data-toggle="tab") {{prod.name}}

使用单击的rowID调用ModalService。

我现在唯一的问题是所有必须在$ scope中，我希望它更加封装

从Angular.js控制器

1 个答案: