在应用程序启动时将所有选项卡加载到 DOM（使用 Ionic）

Question

我有一个带有选项卡式界面的应用程序，它由三个选项卡组成。当用户在 tab1 上执行某些操作时，它会动态创建应出现在第二个选项卡上的元素。问题是当我尝试在我的 javascript 中动态创建该内容时，我无法设置 "null" 的属性，我假设这是因为第二个选项卡未加载到 dom 还。如果我首先导航到第二个选项卡，然后返回到第一个选项卡，它工作正常。我并没有像通常那样使用 angular。一切都在 javascript 中完成。对于底层 UI，我只有一个准系统 app.js。

本质上，我只想在应用程序启动时将所有三个选项卡加载到 DOM 中，这样我就可以从任何其他选项卡动态修改任何选项卡的内容。不知道该怎么做。这是我的 app.js 的样子：

var myApp = angular.module('starter', ['ionic','ngCordova'])

myApp.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    $cordovaStatusbar.overlaysWebView(true)
    $cordovaStatusbar.styleHex('#4a87ee')
    $ionicConfigProvider.views.forwardCache(true);
  });
});

myApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })

    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html"
        }
      }
    })

    .state('tabs.favorites', {
      url: "/favorites",
      views: {
        'favorites-tab': {
          template: "templates/favorites.html",
          controller: 'AppCtrl'
        }
      }
    })

    .state('tabs.settings', {
      url: "/settings",
      views: {
        'settings-tab': {
          templateUrl: "templates/settings.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

myApp.controller('AppCtrl', function($scope) {

})

我的基本应用程序 structure/html 如下所示：

<ion-nav-bar class="bar-positive"></ion-nav-bar>

<ion-nav-view></ion-nav-view>

<script id="templates/tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-positive tabs-icon-only">

    <ion-tab title="Videos" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Favorites" icon-on="ion-ios-star" icon-off="ion-ios-star-outline" href="#/tab/favorites">

      <ion-nav-view name="favorites-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" href="#/tab/settings">
      <ion-nav-view name="settings-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>
</script>

<!-- **************************** HOME TAB **************************** -->
<script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Lmao!Tube">

        <ion-content has-bouncing="true" overflow-scroll="true" class="iframe-wrapper">

            <div id="videoList"> </div>

        </ion-content>

    </ion-view>
</script>

<!-- **************************** FAVORITES TAB **************************** -->  
<script id="templates/favorites.html" type="text/ng-template">
    <ion-view view-title="Favorites" >

        <ion-content has-bouncing="true" overflow-scroll="true" class="iframe-wrapper">

            <div id="favoriteList"></div>

        </ion-content>

    </ion-view>

 </script>

<!-- **************************** SETTINGS TAB **************************** -->
<script id="templates/settings.html" type="text/ng-template">
    <ion-view view-title="Settings">

        <ion-content>

        </ion-content>

    </ion-view>
</script>

Answer 1

实际上，在重新阅读您的问题后，您想以不同的方式来做。单击选项卡后，它会被放置在堆栈上并呈现内容，这就是为什么它仅在您向后和向前推时才有效。更好的方法是通过在服务中保存诸如布尔值之类的更改来利用 AngularJS 和应用程序框架。服务是 object 仅实例化一次以保存信息并将其从控制器传递到控制器。您可以使用该服务来保存控制器动态创建内容的值，并且在您的模板中，您可以使用 AngularJS 的指令，如 ng-show 和 ng-if 等...

例如在 services.js 你可以：

angular.module('starter.services', [])
    .service('MyService', function() {
        var Stuff = {};
        this.set = function(key, value) {
            Stuff[key] = value;
        };
        this.get = function(key) {
            return Stuff[key];
        }
    });

并且在您的家庭控制器中

.controller('HomeCtrl', function(MyService, $scope) {
    MyService.set('home', true);
})

并在您的收藏夹控制器中

.controller('FavCtrl', function(MyService, $scope) {
    if (MyService.get('home') === true) {
        // set a variable or return list or query or whatever you want
        // lets say it's an array
        $scope.list = [1,2,3];
    } else {
        $scope.list = [4,5,6];
    }
})

在您的模板中，您可以执行以下操作：

<div ng-repeat="i in list">
    {{i}}
</div>

如果他们点击主页选项卡，应该打印出 1 2 3，否则打印出 4 5 6。

如果您是 angular 的新手，请转到此处：http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro?utm_source=google&utm_medium=cpc&utm_campaign=course&gclid=CjwKEAjw9bKpBRD-geiF8OHz4EcSJACO4O7TsJ3Mx9m9DOH47-6rmFshzUkkkHzJFhJcNiPl1it9JRoCN_fw_wcB

非常漂亮的课程，可以让您快速了解一些关于 AngularJS 的知识，以便与 Ionic 一起工作。 Ionic 是一个很棒的框架。

在应用程序启动时将所有选项卡加载到 DOM（使用 Ionic）

Load all tabs into DOM on app startup (using Ionic)

javascript

tabs

view

ionic