Question

我是Angular的新手，请耐心等待。

我有一个商店页面，其中包含项目列表。要访问此项目列表，我正在通过第三方api（Shopify购买）进行调用，并在返回结果时更改控制器的范围变量。这些全部基于Angular的phonecatApp（https://docs.angularjs.org/tutorial/step_02）演示仓库

在app.js中

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListController', function PhoneListController($scope, $timeout) {

    $scope.client = window.ShopifyBuy.buildClient({
        domain: 'blah-blah.myshopify.com',
        storefrontAccessToken: 'xXxXxXxXxXxXxXxXx'
    });

    $scope.client.product.fetchAll().then((products) => {
        $scope.items = products;
        console.log($scope.items);
    });     
});

console.log语句提供了我期望的结果以及一系列产品词典。

然后在index.html中

<html lang="en" ng-app="phonecatApp">
    <head>
        <meta charset="utf-8">
        <title>Google Phone Gallery</title>
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="app.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
        <script src="bower_components/angular/angular.js"></script>
        <script type="text/javascript" async="false" src="app.js"></script>
    </head>

    <body>
        <div ng-controller="PhoneListController">
            <p>myText</p>
            <ul>
                <li ng-repeat="item in items">
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </div>
    </body>
</html>

看来，如果视图和模型已正确绑定，则列表应该更改，但因为没有，列表中没有项目出现。如果我将$ scope.items变量分配给app.js中的静态列表，则能够获得显示数据的列表，但这对继续前进显然没有用。我应该追求的任何提示/关键词/参考将不胜感激-恐怕这很可能是一个重复的问题，并且我缺少一些关键术语。再次感谢，

伊恩

Angular，REST服务返回时更新列表。

0 个答案: