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

Question

我有一个包含三个选项卡的选项卡式界面的应用程序。当用户对tab1执行某些操作时，它会动态地创建出现在第二个选项卡上的元素。问题是当我尝试在我的javascript中动态创建该内容时，我得到的不能设置“null”属性，我假设这是因为第二个选项卡尚未加载到dom中。如果我先导航到第二个选项卡，然后回到第一个选项卡，它工作正常。我没有真正使用它通常使用的方式。一切都在JavaScript中完成。我只是为底层UI准备了一个准系统app.js。

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

VAR对myApp = angular.module（ '启动'，[ '离子'， '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

其实重读你的问题后，你想干什么我用不同的方式。一旦你点击了选项卡，它将被放置在堆栈上并呈现内容，这就是为什么它只在你前后推动时才起作用。更好的方法是使用AngularJS和应用程序框架，通过在服务中保存布尔值等更改。服务是一个实例化对象的对象，用于保存信息并将其从控制器传递给控制器​​。您可以使用该服务来保存控制器动态地创建内容的价值观，并在您的模板，你可以使用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如果不是。

如果你是新来的角度去这里：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相当快与离子合作一些事情。离子是一个伟大的框架。