Onsen和AngularJS：重新加载列表项和数据

Question

我正在使用Onsen UI和AngularJS。 但是我有这个问题。

当我从page2.html返回page1.html时，如何调用page1.html中的任何函数？

page1.html

<ons-list>
<ons-list-item ng-repeat="user in users" modifier="chevron" class="list-item-container">
     content
</ons-list-item>
</ons-list>
<ons-button onclick="Navigator.pushPage('page2.html')">Go Page 2</ons-button>

page2.html

<ons-toolbar>
    <ons-back-button>Back</ons-back-button>
</ons-toolbar>

谢谢大家的回答。 我的问题解决了。

解决方案： http : //monaca.mobi/en/blog/lets-make-a-phonegap-app-with-angularjs-onsen-ui/

Answer 1

请尝试这个例子。 $ scope。$ watch在您离开或进入页面时被调用。

<!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />


    <!-- --------------- App init --------------- -->

    <title>Onsen UI Split View</title>



</head>

<body>
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-navigator title="Navigator" var="myNavigator">
  <ons-page ng-controller="firstctrl">
    <ons-toolbar>
      <div class="center">Simple Navigation</div>
    </ons-toolbar>
    <div style="text-align: center">
      <br>
      <ons-button modifier="light" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
        Push Page
      </ons-button>
    </div>
  </ons-page>
</ons-navigator>

<ons-template id="page1.html">
  <ons-page ng-controller="secondctrl">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>Back</ons-back-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <div style="text-align: center">
        <br />
        <ons-button modifier="light" onclick="myNavigator.popPage()">
            Pop Page
        </ons-button>
    </div>
  </ons-page>
</ons-template>


</body>
</html>

<script>
    var app = angular.module('app', ['onsen']);

    app.controller('firstctrl', function($scope, $http)
    {
            $scope.$watch(function( $scope ) 
            {
                console.log( "Function watched" );
            });
    });

    app.controller('secondctrl', function($scope, $http)
    {

    });
</script>

Onsen和AngularJS：重新加载列表项和数据

问题描述

1 个解决方案

解决方案1
0 2015-08-25 11:16:39

Onsen和AngularJS：重新加载列表项和数据

问题描述

1 个解决方案

解决方案1 0 2015-08-25 11:16:39

解决方案1
0 2015-08-25 11:16:39