Ng控制器不传递数据

时间:2016-01-01 05:42:43

标签: angularjs

我是一个有角度的新手,正在开展一个小型项目,并且遇到了一个与ng-controller有关的奇怪问题。当我在部分视图中使用控制器时,客户的名称不会传递给value属性。

但是,如果我将customersFactory(其具有向数据库发出http请求以获取所有客户的函数)注入ordersController,那么一切正常。

我的路线提供者代码:

        myApp.config(function($routeProvider) {
        $routeProvider
        .when('/', {
            controller: 'ordersController',
            templateUrl: 'partials/orders.html'
        })
        .when('/customers', {
            controller: 'customersController',
            templateUrl: 'partials/customers.html'
        })
        .otherwise({
            redirectTo: '/'
        })
    });

    myApp.factory('ordersFactory', function($http) {
        var orders = [];

        var factory = {};

        factory.getOrders = function(callback) {
            $http.get('/orders').success(function(data) {
                orders = data;
                callback(orders);
            })
        }

        factory.addOrder = function(data) {
            return $http.post('/add/order', data);
        }

        factory.deleteOrder = function(id) {
            return $http.delete('/delete/order/' + id);
        }

        return factory;
    });

    myApp.factory('customersFactory', function($http) {
        var customers = [];

        var factory = {};

        factory.getCustomers = function(callback) {
            $http.get('/customers').success(function(data) {
                customers = data;
                callback(customers);
            })
        }

        factory.addCustomer = function(data) {
            return $http.post('/add/customer', data);
        }

        factory.removeCustomer = function(customer_id) {
            return $http.delete('/delete/customer/' + customer_id);
        }

        return factory;
    });

    myApp.controller('ordersController', function($scope, ordersFactory) {

        var getOrders = function() {
            ordersFactory.getOrders(function(data) {
                $scope.orders = data;
            });
        }

        getOrders();

        $scope.addOrder = function() {
            console.log($scope.order);
            ordersFactory.addOrder($scope.order);
            $scope.order = {};
            getOrders();
        }

        $scope.deleteOrder = function(id) {
            ordersFactory.deleteOrder(id);
            getOrders();
        }

    });

    myApp.controller('customersController', function($scope, customersFactory) {

        var getCustomers = function() {
            customersFactory.getCustomers(function(data) {
                $scope.customers = data;
            })
        }

        getCustomers();

        $scope.addCustomer = function() {
            customersFactory.addCustomer($scope.customer);
            $scope.customer = {};
            getCustomers();
        }

        $scope.removeCustomer = function(customer_id) {
            customersFactory.removeCustomer(customer_id);
            getCustomers();
        }
    });

这是orders.html的部分页面。

<h2>Add New Order</h2>
<form>
<label for="name">Customer</label>
<select name="name" ng-model="order.name" ng-controller="customersController">
    <option ng-repeat="customer in customers" value="{{customer.name}}">{{ customer.name }}</option>
</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>

任何人都可以解释为什么会这样吗?我最初的猜测是,它与未明确分配$ scope.customers有关,但我的印象是,只要检测到ng-controller,它就会执行所有&#34;自执行功能&#34;然后将数据分配给$ scope.customers。提前谢谢。

4 个答案:

答案 0 :(得分:2)

使用<option>代替值而不是<option>代码在select标记中使用ng-options,它比<select name="name" ng-model="order.name" ng-controller="ordersController" ng-options="customer as customer in customers" /> 代码

更快
bundle exec rake routes

答案 1 :(得分:0)

尝试使用ng-model="customer.name"代替value="{{customer.name}}"

答案 2 :(得分:0)

请改用ngOptions指令。可以在此处找到文档:https://github.com/bigfish24/ABFRealmSearchViewController

<select name="name" ng-model="order.name" ng-options="customer as customer.name for customer in customers track by customer.name" ng-controller="ordersController">

答案 3 :(得分:0)

非常感谢您的反馈。我想我已经找到了问题的根源。

  1. 我没有使用ng-options迭代一个满是对象的数组。
  2. 我在routeProvider中调用ordersController,但是用customersController覆盖它,导致ng-model =&#34; order.name&#34;不被传递到范围内。
  3. 关于我能做些什么来修复#2的任何指示? &#34; ng-controller =&#39; customersController&#39;必须在标签之前才能进行&#34; ng-options&#34;正确显示选项?