javascript - 在应用程序启动时将所有选项卡加载到 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) {

})

我的基本应用程序结构/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

实际上，在重新阅读你的问题后，你想以不同的方式来做。单击选项卡后，它就会被放置在堆栈上并呈现内容，这就是为什么它仅在您前后插入时才起作用。更好的方法是通过在服务中保存 bool 值等更改来利用 AngularJS 和应用程序框架。服务是仅实例化一次的对象，用于保存信息并将其在 Controller 之间传递。您可以使用该服务来保存 Controller 动态创建内容的值，并且在模板中您可以使用 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 中

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

在您最喜爱的 Controller 中

.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

非常漂亮的类(class)，可以让您快速了解有关 AngularJS 的一些知识，以便与 Ionic 一起使用。 Ionic 是一个很棒的框架。