在應用程序啓動時將所有選項卡加載到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相當快與離子合作一些事情。離子是一個偉大的框架。