2015-04-14 20 views
0

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

本质上,我只想在应用程序启动时将所有三个选项卡加载到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> 

+0

是的,我不认为这就是它通常使用的方式。每个标签内容结构的变化应该可以保存为服务中的数据,然后通过您的控制器访问,以根据他们以前的操作动态显示内容。例如,他们点击home,家庭控制器将数据保存到“GlobalService”,您将GlobalService传递到您的收藏夹控制器中,并根据GlobalService中的值更改该选项卡的内容。那有意义吗?一旦我更好地了解你在做什么,我会给出答案。 – DataHerder

+0

恩,不是。我根本不太熟悉Ionic。我所有的应用逻辑都是javascript。我只是在使用Ionic,因为它是我所需的所有UI组件都可以找到的唯一框架,而无需跳过这些环节并绕过我的$ $$来到我的胳膊肘。 –

+0

糟糕...基本上我在主屏幕上加载了YouTube视频。有一个选项/按钮可将视频添加到收藏夹。当用户点击添加到收藏夹时,它会进入收藏夹阵列,并将视频加载到收藏夹选项卡中。通过逻辑工作正常,除了我必须先导航到第二个选项卡。 –

回答

1

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

+0

看起来很漂亮,但我不知道这意味着什么......就像我说的,我的应用程序是用javascript编写的,而不是角度。我纯粹将Ionic用于UI组件。而且我不想重写我的整个应用程序。如果像DOM操作这样基本的操作很复杂,我会抛弃Ionic并进入一个更易于使用的框架。在我尝试过的其他所有框架中都非常简单,除了Ionic出于某种原因外,我假设它是与Angular紧密集成的。 –

+0

是的,它与angular非常紧密地结合在一起,angularjs是javascript,但我想我明白你的意思。除了更大的应用程序之外,您正在将此用于某个侧面项目。如果你不太了解角度或离子(如果你对我刚才所说的话不了解,那么显然你不了解),那么A)你最好学习更多关于它的知识,或者B)跳过这一切一起。 Ionic是在Angular之上撰写的,因为它是基础框架,使用离子技术至少需要对Angular有一个基本的理解。 – DataHerder

+1

感谢您的详细解释。我认为它确实回答了这个问题,并且超越了这个问题。 –

相关问题