我的（monaca /onsen UI）启动时如何调用函数答案

【问题标题】：how to call function when my (monaca /onsen UI ) start我的（monaca /onsen UI）启动时如何调用函数
【发布时间】：2016-12-21 09:59:34
【问题描述】：

在我的 (monaca /onsen UI angularjs) 应用程序中，我想在项目启动时加载我的项目

 <script>
    ons.bootstrap()
      .controller('AppController', function() {
        this.pushes = 0;
        this.pops = 0;
        this.details = 0;
        this.showDetails = function(){
            if (this.details == 1)
                this.details = 0;
            else
                this.details = 1;
        }
        this.getProjects = function(){
            console.log('getData');
             $http.get("http://localhost:3000/api/getAllProject")
                .then(function(response) {
            this.projects = response.data;
            console.log('Projects: '+this.projects)

    });
        }
    });
  </script>

这是html页面

<body ng-controller="AppController as app">
 <ons-sliding-menu
  menu-page="menu.html" main-page="home.html" side="left"
  var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="home.html">
  <ons-navigator var="myNav">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Projects</div>
      <div class="right">
        <ons-toolbar-button>
            <ons-icon icon="refresh" size="30px" fixed-width="true"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <ons-list>
        <ons-list-item ng-click="app.showDetails()" ng-repeat="item in app.projects">
              {{item.projectcode}}
        </ons-list-item>
        <div ng-show="app.details==1">
            <p ng-click="myNav.pushPage('level1.html')"> Levels </p>
        </div>
    </ons-list>
  </ons-page>
  </ons-navigator>
</ons-template>

如您所见，我需要在应用程序启动时从 AppController 调用函数 getProjects()，以便我可以从数据库中获取项目以显示它

【问题讨论】：

标签： angularjs onsen-ui monaca

【解决方案1】：

有 3 种简单的方法可以实现您想要的。差异很小，但最好了解它们。

使用ons-page 的ons-init 属性

<ons-navigator var="myNav">
  <ons-page ons-init="app.getProjects()">
    ...
  </ons-page>
</ons-navigator>

这将在页面初始化（附加到 DOM）时加载数据。

使用ons-page 的ons-show 属性
```
<ons-navigator var="myNav">
  <ons-page ons-show="app.getProjects()">
    ...
  </ons-page>
</ons-navigator>
```
这将在页面显示时加载数据（例如，如果您在多个页面之间切换）。这意味着如果您使用导航器转到另一个页面然后返回，它将再次被调用（这样会刷新项目）。
使用ons.ready 函数。如果您只想在 onsen 准备好执行其神奇的 ui 功能后调用该函数一次，您可以使用它。它确保DOMContentReady、deviceready 和其他一些事件已被触发，然后调用您的函数。用法：
```
ons.ready(function(){
  // get the data
});
```
注意：它需要一个函数 - 这意味着您实际上不应该自己调用它 - 它应该像这样 ons.ready(myFunction) ，而不是 ons.ready(myFunction())。

请随意选择您认为与您的案例最相关的方法。

一些最后的笔记：

属性是swipeable - 你错过了e。您的示例有效，因为它默认是可滑动的。
我没有看到您将 $http 作为依赖项。除非你从其他地方得到它，否则你应该这样做：
```
ons.bootstrap()
  .controller('AppController', function($http) {
    ...
  });
```

【讨论】：