我的 (monaca /onsen UI ) 启动时如何调用函数

Question

在我的 (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()，这样我就可以从数据库中获取项目来显示它

Answer 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函数。如果你只想在温泉准备好施展魔法 ui 之后调用该函数一次，你可以使用它。它确保 DOMContentReady、deviceready 和其他一些事件已被触发，然后调用您的函数。用法：
```
ons.ready(function(){
  // get the data
});
```
注意：它需要一个函数——这意味着你实际上不应该自己调用它——它应该像这样 ons.ready(myFunction) ，而不是 ons.ready(myFunction()).

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

一些最后的说明：

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

我的 (monaca /onsen UI ) 启动时如何调用函数

how to call function when my (monaca /onsen UI ) start

angularjs

onsen-ui

monaca