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（），这样我就可以从DB获取项目来显示它

Answer 1

有3种简单的方法可以达到你想要的效果。差异很小，但最好了解它们。

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

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

最后的一些说明：

该属性为ons.ready(myFunction) - 您错过了ons.ready(myFunction())。您的示例有效，因为默认情况下它可以刷卡。
我没有看到你将swipeable作为依赖。除非你从其他地方获得它，否则你应该这样做：
```
e
```

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

1 个答案: