Question

我有以下AngularJS控制器，用Typescript编写：

/// <reference path='../../definitions.d.ts' />

module baseApp.viewControls.products {
    export interface IProductsScope extends IAppScope {
        vm: {
            products: Array<common.models.IProduct>;
        }
    }

    export class ProductsController extends base.BaseController {
        public products: Array<common.models.IProduct>;
        public ProductRepository: common.repositories.ProductRepository = new common.repositories.ProductRepository();

        constructor(public $scope: IProductsScope, private $state: ng.ui.IStateService) {
            super();
            this.ProductRepository.all().then((products: Array<common.models.IProduct>) => {
                this.products = products;
                $scope.vm = this;
            });
        }
    }

    function setRouteState($stateProvider:ng.ui.IStateProvider) {
        var state: ng.ui.IState = {
            url: '/products',
            views: {
                mainContent: {
                    templateUrl: 'viewcontrols/products/products.html',
                    controller: 'ProductsController'
                }
            },
            cache: false
        };

        $stateProvider.state('app.products', state);
    }

    export var productsComponentModule:ng.IModule = angular.module('baseApp.viewControls.products', [
    ]);
    productsComponentModule.controller('ProductsController', ProductsController);
    productsComponentModule.config(setRouteState);
}

这一点的重要部分是ProductsController构造函数。在该控制器中，我将this.products设置为等于对象数组，并将$scope.vm设置为this。我希望这能让我访问vm.products。在我的控制器中，$scope.vm.products看起来不错。这是我的观看代码：

<li ng-repeat="product in vm.products">
        {{product.modelNumber}}
</li>

这给了我一个空白的屏幕，虽然vm.products在我的控制器中看起来不错。奇怪的是，如果我刷新浏览器，这个代码似乎有十分之一的效果。这让我相信双向数据绑定不能像我期望的那样工作，并且存在一些竞争条件，其中渲染需要10次中的10次，并且vm.products实际上是在渲染之前设置的。 / p>

我对此的理解是什么，这样才能使产品每次都不被渲染？

Answer 1

我对此的理解是保持产品不会每次都呈现

有些事情：

XHR可能会挂起。
你可能会在角度消化周期之外做一些事情。试试$scope.$apply()

AngularJS - 正在设置但未呈现的VM数据

1 个答案: