

現在、angularJSとonsenUIを用いて、開発中です。

onsenUIのons-lazy-repeatを使ってみたのですが、上手く動きません。  
maincontrollerに適当なメソッドを追加してよぶことはできているので、コントローラーとの接続ミスではないと思うのですが、色々いじっても動かず途方にくれています。

どこが問題なのか指摘していただけるとありがたいです。

index.html

[code]

    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <script src="https://www.google.com/jsapi"></script>
    <script src="js/xdate.js"></script>
    <script src="js/maincontroller.js"></script>
    <script src="js/dataservice.js"></script>
    
    
    
    
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/accodinon.css">
    
     <script>
    
    
        var app=angular.module('myApp', ['onsen','mainControllers']);
    
    
    
    
    
    </script>
    </head>
    <body>
    
    <ons-navigator page="lazy_list_page.html">
    
    
    </ons-navigator> 
    </body>
    </html>
    
[/code]

maincontroller.js

[code]

    var mainControllers=angular.module('mainControllers',[]);
    
    //メインコントローラー        
    mainControllers.controller('MainController',['$scope','DataService',
    function($scope,DataService){
    
    
    
    $scope.MyDelegate = {
    countItems: function() {
      // Return number of items.
      return 1000000;
    },
    
    calculateItemHeight: function(index) {
      // Return the height of an item in pixels.
      return 45;
    },
    
    configureItemScope: function(index, itemScope) {
      // Initialize scope
      itemScope.item = 'Item #' + (index + 1);
      itemScope.hoge = 'Hoge #' + (index + 1);
    },
    
    destroyItemScope: function(index, itemScope) {
      // Optional method that is called when an item is unloaded.
      console.log('Destroyed item with index: ' + index);
    }
    };
    }
    }]);
    
[/code]

lazy_list_page.html

[code]

    <ons-list ng-controller="MainController">
    <ons-list-item ons-lazy-repeat="MyDelegate"`>
    {{ item }}
    {{ hoge }}
    </ons-list-item>
    </ons-list>
    
[/code]


CC BY-SA 3.0
2015-03-31T12:00:21.700
8612
2015-08-31T15:27:07.130
9094
question
monaca onsen-ui angularjs
ons-lazy-repeatがうまく動きません。


こちらのソースコードで正常に動作することを確認しました。ng-
appディレクティブを使ってモジュール初期化を行われているようですが、user7461さんも仰っているように、まずはons.bootstrap()を使ったサンプルをカスタマイズしていった方が良いかなと思います。

index.html  
  

[code]

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <script src="components/loader.js"></script>
        <link rel="stylesheet" href="components/loader.css">
        <link rel="stylesheet" href="css/style.css">
        <script>
            ons.bootstrap()
    
            .controller('MyController', function($scope) {
                $scope.MyDelegate = {
                    countItems: function() {
                        // Return number of items.
                        return 1000000;
                    },
    
                    calculateItemHeight: function(index) {
                        // Return the height of an item in pixels.
                        return 45;
                    },
    
                    configureItemScope: function(index, itemScope) {
                        // Initialize scope
                        itemScope.item = 'Item #' + (index + 1);
                    },
    
                    destroyItemScope: function(index, itemScope) {
                        // Optional method that is called when an item is unloaded.
                        console.log('Destroyed item with index: ' + index);
                    }
                };
            });
        </script>
    </head>
    <body>
        <ons-navigator var="myNavigator" page="page1.html">
        </ons-navigator>
    </body>
    </html>
    
[/code]

page1.html

[code]

    <ons-page>
        <ons-toolbar>
            <div class="center">Navigator</div>
        </ons-toolbar>
    
        <ons-list ng-controller="MyController">
            <ons-list-item ons-lazy-repeat="MyDelegate"`>
                {{ item }}
            </ons-list-item>
        </ons-list>
    
    </ons-page>
    
[/code]


CC BY-SA 3.0
2015-04-03T09:55:55.370
8729
2015-04-03T09:55:55.370
7871
8612
answer