javascript - 使用 ionic 中的 angularjs 创建和更新全局列表

标签 javascript angularjs ionic-framework angularjs-directive ionic-view

我尝试在我的 ionic 项目中使用 rootScope 变量声明一个全局列表。我的目标是用特定消息更新此列表。根据我的情况,我对他们的形式有不同的看法。我尝试在应用程序的另一个 View 中保存已完成的操作。当我按下“x”表单的按钮时,“x 表单已完成”消息应该被推送到该全局列表中。之后,当我按下“y”表单的按钮时,“y 表单已完成”消息应附加到该列表。然后,我在完成的操作 View 中显示全局列表的内容。

在每个 View 中,我都有一个按钮,如屏幕截图 2 所示。

另外,我在下面的 controller.js 文件中将这些 View 与 Controller 连接起来:

我使用 rootScope 创建了一个全局列表,供其他 Controller 访问该列表值

 .controller('MainCtrl', function($scope, $rootScope, $state) {

      $rootScope.onButtonClick = function (obj) {
        $rootScope.buttons = [];
        $rootScope.buttons.push(obj); 
        $state.go('app.completed');
    }
 })

然后我将 Completed Actions View 与另一个 Controller 连接以显示列表的最终 View ,以查看应用程序中所有按下的按钮:

 .controller('CompletedCtrl', function($scope,$rootScope,$state) {

    $scope.buttons = $rootScope.buttons;

    $scope.onCompletedButtonClick = function(){
    $state.go('app.homepage');  

  }

})

已完成的操作 View (html 文件):


    <span style="color:white">COMPLETED TravelBuddy</span>

 </ion-nav-title>

 <ion-content>

  <div class="list">

  <ion-list>

  <ion-item ng-repeat="item in buttons">
   {{item}}!
  </ion-item>

  </ion-list>

  <label class="item">
      <button class="button button-block button-balanced" ng-click="onCompletedButtonClick()">+</button>
    </label>
</div>

</ion-content>

运行我的移动应用程序后,我无法显示列表中所有推送的项目,我只能在屏幕截图 1 的已完成操作中看到第一个按下的按钮消息。我该如何解决这个问题? screenshot1 screenshot2

最佳答案

您写道“消息应附加到该列表。”

但每次单击按钮时都会清除它。

将这一行移出 onButtonClick:rootScope.buttons = [];

关于javascript - 使用 ionic 中的 angularjs 创建和更新全局列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41315239/

相关文章:

javascript - Discordjs - 获取后 lastMessageId 始终为空事件

javascript - 从 JSON 对象周围删除双引号 - JS

javascript - Angularjs - 在指令内调用 Controller 函数

javascript - IBM Mobile First Platform (6.3) - Windows Phone 8 环境和 Angularjs

javascript - 类型错误 : Cannot read property '$valid' of undefined on using ng-submit

ionic-framework - 固定标签模板上的搜索栏

html - ionic 下拉选择问题

javascript - THREE.js 如何停止 chop 由 2D Canvas 制成的纹理中的文本

html - 如何将默认菜单图标更改为 ionic 中的图像图标

javascript - 为什么这个函数不能多次保存信息?