JQM& Angular:从页面到页面传递值

时间:2014-01-15 14:12:58

标签: api angularjs jquery-mobile cordova

我一直在努力争取这一天,似乎无法找到让它发挥作用的最佳方式。

我正在构建一个Phonegap,Jquery Mobile和Angular JS App。页面的JQM,AngularJS从API中提取数据。

我有一个UL列表,链接到完整描述。单击时,我需要加载另一个JQM页面并将值传递给该页面控制器以启用查询API。

我尝试了从本地存储,ng点击工厂到共享值的所有内容。我似乎无法让第二个控制器看到传递的值。谁知道我哪里出错?

提前致谢。

页面列表控制器

这是加载页面标题列表视图的控制器

// Factory to get categories
app.factory("api_get_categories_by_group", function ($resource) {
return $resource(
    "http://MYDOMAIN.com/api/get_categories_by_group",
    {
        "group_id": "9"
    }
  );
});

// Get the list from the factory and put data into $scope.categories so it can be repeated
function categoryList ($scope, api_get_categories_by_group, getID) {
  $scope.categories = [];

  // Get all categories returned by the API
  $scope.categories = api_get_categories_by_group.query();

  $scope.getCatID = function (id) {
    getID.prepForBroadcast(id);
  };
}

处理数据共享的工厂

此控制器基于:http://onehungrymind.com/angularjs-communicating-between-controllers/

app.factory("getID", function ($rootScope) {
var sharedID = {};
sharedID.theID = '';

sharedID.prepForBroadcast = function (id) {
    this.theID = id;
    this.broadcastItem();
};

sharedID.broadcastItem = function () {
    $rootScope.$broadcast('handleBroadcast');
};

return sharedID;
});

详细页面控制器

此控制器需要共享值才能启用API

的查询
// Factory to get products by category
app.factory("api_get_channel_entries_products", function ($resource) {
return $resource(
    "http://MYDOMAIN.com/feeds/app_productlist/:cat_id",
    {
        cat_id:'12'
    }
);
});

// Get the list from the factory and put data into $scope.categories so it can be repeated
function productList ($scope, api_get_channel_entries_products) {

$scope.products_list = [];

$scope.$on('handleBroadcast', function() {
    $scope.catID = getID.sharedID;
    console.log($scope.catID);
});

$scope.products_list = api_get_channel_entries_products.query();
}

我一直在尝试使用mg-click来传递页面的ID - 但是,我还没有将其添加到代码中,因为我认为它很可能是问题的根源。

HTML:hg-click

<li ng-repeat="cat in categories"><a href="#product-list" ng-click="getCatID(cat.cat_id)">{{cat.cat_name}}</a></li>

1 个答案:

答案 0 :(得分:0)

我不是专家,但是当我想在控制器之间传递数据时,我遇到了类似的问题。以下方法对我最有效:

app.service('dataService', function() {

    var _currentData = {};

    return {
        getCurrentData: function(){
            return _currentData;
        },
        setCurrentData: function(input){
            _currentData = input;
        }
    };
});

在需要访问数据的控制器中:

$scope.$watch(function() {
        return dataService.getCurrentData();
    }, function(newValue, oldValue) {
        if (newValue != null) {
            $scope.Data = newValue;
        }
}, true);