2个控制器在1个视图中 - 数据未从表单提交

时间:2016-01-02 03:50:48

标签: angularjs

我有一个问题,我不确定如何解决。我有一个单页面应用程序,其中控制器由routeProvider处理。在其中一个视图文件(order.html)中,我想从另一个控制器(customersController)引入数据,并在选择/选项下拉菜单中使用它。但是,由于我直接在视图文件中调用另一个控制器,customersController会覆盖ordersController,从而阻止了ordersController看到ng模型。我的问题是,每当我提交新订单时,order.name都不会传递到范围内。 Order.quantity和order.product显示得很好。

以下是orders.html视图页面:

<h2>Add New Order</h2>
<form>
    <label for="name">Customer</label>
    <select name="name" ng-model="order.name" ng-controller="customersController" ng-options="customer.name for customer in customers">
    </select>
    <label for="quantity">Order</label>
    <select name="quantity" ng-model="order.quantity">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select name="product" ng-model="order.product">
        <option value="Nike Shoes">Nike Shoes</option>
        <option value="Black Belts">Black Belts</option>
        <option value="Ice Creams">Ice Creams</option>
        <option value="Candies">Candies</option>
        <option value="Waffles">Waffles</option>
    </select>
    <input type="submit" value="Order" ng-click="addOrder()">
</form>
<table>
    <thead>
        <tr>
            <td>Customer Name</td>
            <td>Product</td>
            <td>Quantity</td>
            <td>Date</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="order in orders">
            <td>{{ order.name }}</td>
            <td>{{ order.product }}</td>
            <td>{{ order.quantity }}</td>
            <td>{{ order.date }}</td>
            <td><a href="#/" ng-click="deleteOrder(order._id)">Remove</a></td>
        </tr>
    </tbody>
</table>

现在解决这个问题的一种方法是将customersFactory注入ordersController,但我不确定这是否是解决此问题的正确方法。这似乎是一个廉价的乐队援助修复,因为每次使用ordersController时,它现在将包含customersFactory。因为我可以用一堆工厂注入一个通用控制器,所以这样就失去了拥有多个控制器的目的。

关于我能做什么的任何建议或想法?提前谢谢。

0 个答案:

没有答案