onsen-ui2 - onsen ui2 - 使用 angularjs 的主详细信息页面

Question

如何使用 angularjs 创建主详细信息页面。我创建了一个从 json 文件调用数据的工厂，然后创建了一个列表控制器来列出列表项的标题，但是当我到达视图控制器时，我得到了一个错误。代码示例如下

 var cachedData;

    function getData($scope, callback) {

        $http.get('js/husbandry.json').success(function(data) { // call data from json file
            $scope.items = data.items;
            callback(data.items);
            console.log(data);
        }).error(function() {
            ons.notification.alert({
                message: 'Could not Connect to the Database.'
            });
        });
    }

    return {
        list: getData,
        find: function(data, callback) {
            var hb = cachedData.filter(function(items) {
                return items.title == data;
            })[0];
            callback(hb);
        }
    };
});

module.controller('ListCtrl', function($scope, HB) {
    $scope.items = {
        title: 'day 2'
    }

    HB.list($scope.items.title, function(items) {
        $scope.items = items;
    });

    $scope.showDetail = function(title) {
        $scope.navi.pushPage("day1.html", { animation: "fade", items: title });
    }

});


module.controller('ViewCtrl', ['$scope', 'HB', function($scope, HB) {
    var page = $scope.navi.topPage.data;
    HB.find(page.options.data, function(hb) {
        $scope.items = hb;
    });
}]);