Question

我试图对服务器进行单个ajax调用，而不是使用响应来调用具有相同数据的更多AngularJS。我使用angular.min.js和ng-table.min.js创建html表。但这对我不起作用。

谢谢您的帮助。

add_action( 'woocommerce_after_shop_loop_item', 'custom_before_title' );
function custom_before_title() {
    global $product;

    if( $seizoen = $product->get_attribute('pa_seizoen') ) {
        echo '<h4><strong>Seizoen:</strong>' . $seizoen . '</h4>';
    }
    if( $maat = $product->get_attribute('pa_maat') ) {
        echo '<h4><strong>Maat:</strong> ' . $maat . '</h4>';
    }

    $parent_id = $product->get_parent_id(); // Get the parent Variable Product ID
    // Below, all Parent variable product data
    if( $parent_id > 0 && $parent_product = wc_get_product($parent_id) ) {
        if( $tijk_weving = $parent_product->get_attribute('pa_tijk-weving') ) {
            echo '<h4><strong>Tijk:</strong> ' . $tijk_weving . '</h4>';
        }
        if( $fullkraft = $parent_product->get_attribute('pa_fullkraft') ) {
            echo '<h4><strong>Vulkracht:</strong> ' . $fullkraft . '</h4>';
        }
        if( $vulling = $parent_product->get_attribute('pa_vulling') ) {
            echo '<h4><strong>Vulling:</strong> ' . $vulling . '</h4>';
        }

        // Display the parent variable product description
        echo '<p><strong>Beschrijving:</strong> ' . $parent_product->get_description() . '</p>';

        // Display the parent variable product short description
        echo '<p><strong>Korte beschrijving:</strong> ' . $parent_product->get_short_description() . '</p>';
    }  

    // Display the product variation description
    // echo '<p><strong>Beschrijving:</strong> ' . $product->get_description() . '</p>';

    // Display the product variation weight
    // echo '<p><strong>Gewicht:</strong> ' . wc_format_weight( $product->get_weight() ) . '</p>';

    // Display the product variation dimensions
    // echo '<p><strong>Dimensies:</strong> ' . $product->get_dimensions() . '</p>';
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css" />

当我调用函数<b>List of Orders 1:</b><br> <div> <div ng-controller="selectFilterController1"> <table ng-table="tableParams" id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%"> <tbody> <tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}"> <td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td> <td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td> <td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td> <td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td> </tr> </tbody> </table> </div> <br><b>List of Orders 2:</b><br> <div ng-controller="selectFilterController2"> <table ng-table="tableParams" id="datatable" class="table" show-filter="true" style="font-size: 11px;position: relative; width: 100%"> <tbody> <tr ng-repeat="row in $data" ng-class="{'color-status-green': row.status === row.status}"> <td style="width:40px;white-space:nowrap;" title="Address from" data-title="'Address from'" filter="{board_address: 'text'}" sortable="'board_address'">{{ row.board_address }}</td> <td style="width:40px;white-space:nowrap;" title="Address to" data-title="'Address to'" filter="{dest_address: 'text'}" sortable="'dest_address'">{{ row.dest_address }}</td> <td style="width:40px;white-space:nowrap;" title="Last name" data-title="'Last name'" filter="{last_name: 'text'}" sortable="'last_name'">{{ row.last_name }}</td> <td style="width:40px;white-space:nowrap;" title="Time" data-title="'Time'" filter="{created_at: 'text'}" sortable="'created_at'">{{ row.created_at }}</td> </tr> </tbody> </table> </div>时，响应会传输到控制器，但是

ajaxCallOrders()

Answer 1

要包含可注入多个控制器的方法和数据，请创建一个AngularJS service。

app.service("orders", function($http) {
    var orderListData = {"token": authToken, "limit": "50"};
    var config = { params: orderListData };
    var ordersPromise = $http.get("orders.php",config);

    this.getPromise = function() {
        return ordersPromise;
    });
};

用法：

app.controller('selectFilterController2', function(orders, NgTableParams) {
    orders.getPromise().then(function(response){
        $scope.array = response.data;
        var xLength = $scope.array.length;    
        $scope.tableParams = new NgTableParams(
            {page: 1, count: xLength},
            {data: datax, counts: [10, 15, 20, xLength]}
        );
    }
})

该服务使用$ http服务执行XHR GET请求并存储承诺。 orders服务可以注入到多个控制器或其他自定义服务中。 getPromise方法返回一个承诺，其中包含来自GET请求的响应。

有关更多信息，请参见

AngularJS Developer Guide - Creating Services

如何使用javascript中的单个ajax调用将数据插入更多AngularJS控制器

1 个答案:

用法：