AngularJS和JayData数据呈现问题

Question

我创建的应用使用jaydata angularjs j query mobile和webSql作为database我使用jaydata创建了上下文并存储了所有数据webSql现在我使用angularjs并将其附加到j query mobile个html页面中。我认为angularjs是2-way绑定的能力，但当我添加数据并将其记录时，它存储在数据库中但未在页面上显示，直到我刷新整个页面 这是我的跑步application

我的流程图片正在关注

主要应用屏幕

点击食物日志 以下屏幕来了 它第一次是空的，因为还没有记录数据

然后点击右上角的plus button添加新日志

现在填写下面的数据

然后点击添加食物日志，然后点击屏幕

但实际上它必须看起来像这个，但为此我需要手动刷新页面

我们知道angularJs提供双向绑定，因此不需要刷新 在这个问题上帮助我这是J Query Mobile

的单页结构

更新代码

// JavaScript File For Controlling Food Module
var myApp = angular.module('myApp',[]);
myApp.controller('foodSelection',function($scope,$location)
{
var isSubmit = "false"; // Check Before Logging. Is All Field Fill oOr Not?
_context.onReady(
{
    success: function()
    {
        try
        {
            _context.FoodGroup.toArray().then(function (foodCatagories)
            {
                $scope.$apply(function ()
                {
                    try
                    {
                        $scope.foodCatagories = foodCatagories; // Attach Food Groups From DB To HTML Component
                    }
                    catch(error)
                    {
                        console.log("Inner Try  "+error);
                    }
                });
            });
        }
        catch(error)
        {
            console.log("Outer Try  "+error);
        }
    },
    error: function (error)
    {
        console.log("Error In Getting Data "+error);
    }
}); // End Of Context Redy Check
$scope.changeFoodCatagory = function(foodGroupObject)
{
    _context.FoodItem.filter("it.FoodGroup.FoodGroupID.startsWith('"+foodGroupObject.FoodGroupID+"')").toArray().then(function (foods)
    {
        $scope.$apply(function ()
        {
            try
            {
                $scope.foods = foods; // Attach FoodItem
            }
            catch(error)
            {
                console.log("Inner Try  "+error);
            }
        })
    });
}
$scope.changeFood = function(foodItemObject)
{
    _context.FoodItemWeight.filter("it.FoodItem.FoodItemID.startsWith('"+foodItemObject.FoodItemID+"')").toArray().then(function (serveSizes)
    {
        $scope.$apply(function ()
        {
            try
            {
                $scope.serveSizes = serveSizes; // Attach ServeSize Of The Selected Food
            }
            catch(error)
            {
                console.log("Inner Try  "+error);
            }
        })
    });
}

$scope.changeServeSize = function(foodWeightObject)
{
    var noOfServes = {};
    noOfServes.cast = [{value: "1",text: "1"},{value: "2",text: "2"},{value: "3",text: "3"},{value: "4",text: "4"},{value: "5",text: "5"},{value: "6",text: "6"},{value: "7",text: "7"},{value: "8",text: "8"},{value: "9",text: "9"},{value: "10",text: "10"},{value: "11",text: "11"},{value: "12",text: "12"},{value: "13",text: "13"},{value: "14",text: "14"},{value: "15",text: "15"},{value: "16",text: "16"},{value: "17",text: "17"},{value: "18",text: "18"},{value: "19",text: "19"},{value: "20",text: "20"}];
    $scope.noOfServes = noOfServes; // Attach No Of Servings
}
$scope.changeServeNo = function()
{
    isSubmit = "true";  // Mark True As All Fields Are Select
}
$scope.go = function()
{
    if(isSubmit == "true")
    {
        var date = Date.now();
        var calcories = (($scope.food.Energ_Kcal/100)*$scope.serveSize.Gm_Wgt)*$scope.serveNo.value;
        var quant = $scope.serveNo.value;
        _context.FoodItem.filter("it.FoodItemID.startsWith('"+$scope.food.FoodItemID+"')").forEach(function (foods)
        {
            $scope.$apply(function ()
            {
                try
                {
                    _context.User.filter("it.UserID.startsWith('"+1+"')").forEach(function(user)
                    {
                        _context.FoodLog.add({Quantity:quant,TotalCalories:calcories,DateTime:date,FoodItem:foods,User:user});
                        _context.saveChanges();
                    });
                }
                catch(error)
                {
                    console.log("Inner Try  "+error);
                }
            })
        });
        //$.mobile.changePage( "index.html#foodscreen")
        $location.hash('foodscreen');
    }
    else
    {
        alert("Select All Fields");
        return false;
    }
} // End Of Go Function
}); // End Of Controller
myApp.controller('foodLogCtrl',function($scope,$route)
{
_context.onReady(
{
    success: function()
    {
        try
        {
            _context.FoodLog.include("FoodItem").include("FoodItem.FoodGroup").toArray().then(function(foodLogs)
            {
                $scope.$apply(function ()
                {
                    try
                    {
                        /*var totalCaloriesGained = 0;
                        for(var i=0; i<foodLogs.length; i++)
                        {
                            totalCaloriesGained += parseFloat(foodLogs[i].TotalCalories);
                        }
                        alert(totalCaloriesGained);*/
                        $scope.foodLogs = foodLogs; // Attach Food Logs From DB To HTML Component
                    }
                    catch(error)
                    {
                        console.log("Inner Try  "+error);
                    }
                });
            });

        }
        catch(error)
        {
            console.log("Outer Try  "+error);
        }
    },
    error: function (error)
    {
        console.log("Error In Getting Data "+error);
    }
}); // End Of Context Redy Check
$scope.deleteLog = function(id)
{
    try
    {
        _context.FoodLog.filter('it.FoodLogID == '+id+'').forEach(function(foodlog)
        {
            _context.FoodLog.remove(foodlog);
            _context.saveChanges();
            //$route.reload();
        });
    }
    catch(error)
    {
        console.log("Error Catch During Deletion "+error);
    }
    /*$.mobile.changePage( $("#foodscreen"),{
            allowSamePageTransition: true,
            transition: 'none',
            reloadPage: true
        });*/
    $('#foodLoggedID_'+id).hide();
}//End Of Delete Function
});
myApp.controller('foodDetailLogCtrl',function($scope)
{
$scope.editLog = function(id)
{
    //alert(id);
    //var obj = [{foodName:"Hello"}];
    try
    {
        _context.FoodLog.filter('it.FoodLogID == '+id+'').include("FoodItem").include("FoodItem.FoodGroup").toArray().then(function(foodDetails)
        {

            $scope.$apply(function ()
            {
                $scope.foodDetails = foodDetails;
            });
        });
    }
    catch(error)
    {
        console.log("Error Catch During Deletion "+error);
    }
}
});

我写这样的HTML

<ul id="foodloglist" data-role="listview" data-inset="true" data-icon="false" ng-controller="foodLogCtrl" data-split-theme="d" data-split-icon="delete">
            <!--<li>
                <input data-type="search" class="search" placeholder="Search" name="phonesListState.search" autofocus/>
            </li>-->
            <li ng:repeat="foodLog in foodLogs" id="foodLoggedID_{{foodLog.FoodLogID}}">
                <a href="#foodLogDetail" ng-click="editLog(foodLog.FoodLogID);">
                <img src="sm_images/128x128/food.png" class="ui-li-thumb" />
                <span class="ui-li-heading">{{foodLog.FoodItem.Shrt_Desc}}</span>
                <span class="ui-li-desc">{{foodLog.FoodItem.FoodGroup.Description}}</span>
                <span class="ui-li-count">{{foodLog.TotalCalories}}</span>
                </a>
                <a href="#foodscreen" ng-click="deleteLog(foodLog.FoodLogID)" data-rel="popup" data-position-to="window" data-transition="pop">Delete</a>
            </li>
        </ul>

Answer 1

这是因为saveChanges（）是异步的 并且你的$ apply在saveChanges（）完成之前运行

我们已经发布了一个angularjs模块，请使用该模块，这样您就不必手动调用$ apply，您的代码将更短更容易理解 你可以在我们的博客中找到更多关于它的信息