使用angularjs无法同步数据

时间:2015-10-23 18:13:38

标签: angularjs onsen-ui

我将数据存储在这样的工厂中:

module.factory('AddedStockListData', function(){
var list= [];
var size = 0;
return{
    getList: function(){
        return list;
    },
    setList: function(data){
        list = data;
    },
    getSize:function(){
        return size;
    },
    setSize:function(){
        size++;
    },
    setDelSize:function(){
        size--;
    }
}
});

在我的控制器中代码如下:

    $scope.stocksSearchList = AddedStockListData.getList();

   $scope.load = function($done){        
    $timeout(function() { 
        document.getElementById("showTipsToDropDown").style.display = "none";
        $scope.stocksSearchList = AddedStockListData.getList();
        $done();
    }, 500); 

}

我喜欢这样的HTML:

<ons-page ng-controller="createPortStockController">
    <ons-pull-hook ng-action="load($done)" var="loader" id="pullDown">
        <span ng-switch="loader.getCurrentState()">
          <span ng-switch-when="initial"><ons-icon size="35px" icon="ion-arrow-down-a"></ons-icon> Pull down to refresh</span>
          <span ng-switch-when="preaction"><ons-icon size="35px" icon="ion-arrow-up-a"></ons-icon> Release to refresh</span>
          <span ng-switch-when="action"><ons-icon size="35px" spin="true" icon="ion-load-d"></ons-icon> Loading data...</span>
        </span>
    </ons-pull-hook>
    <div>
        <ons-toolbar class="DCF"  fixed-style>
            <div class="left">
                <ons-back-button style="color:white;"></ons-back-button>
            </div> 
            <div class="center" style="font-size:22px;" >Create Portfolio</div>
            <div ng-click="create()"class="right" style="font-size:18px;color:white;margin-top:10px;padding-right:10px;" >Create</div>
        </ons-toolbar>
        <div class="addStockButton" ng-click = "myNavigator.pushPage('portStockSearchList.html', { animation : 'slide'})">
            <i class="fa fa-plus" ></i>Add Stock
            <p id="showTipsToDropDown"style="margin:0px;font-size:12px;text-align:center;color:#adadad;">After your first time add stocks, please drop down to refresh</p>
        </div>

        <div class="stockSearchList">
            <div ng-repeat="stockSearch in stocksSearchList">
                <div class="stockSearchOne">
                    <div class="stockSearchOneComp">{{stockSearch.company}}</div>
                    <div class="stockSearchOneInfo">Symbol: {{stockSearch.symbol}} | Exchange:{{stockSearch.exchange}} </div>                        
                </div> 
            </div>
        </div>
    </div>

实际上,我在下一页中更改了出厂数据,我想在更改出厂数据时更改显示页面。 但结果是,在我第一次更改下一页中的数据并返回到此页面时,数据将不会显示,我将使用ons-pull-hook&gt;刷新此页面。然后如果我转到下一页更改数据,当我回到这里时,数据将被同步显示。 所以结果是第一次,我必须刷新页面才能获得数据,但是在第一次之后,我不需要这样做

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

在获取数据后尝试使用$scope.$apply(),它应该更新内容而无需刷新页面。您可以详细了解$scope.$apply() here