Question

我有一个带标签式界面的应用程序，它由三个标签组成。当用户在tab1上执行某些操作时，它会动态创建应显示在第二个选项卡上的元素。问题是当我尝试在我的javascript中动态创建该内容时，我无法设置＆＃34; null＆＃34;的属性，我假设是因为第二个标签不是＆＃39; t装入dom了。如果我首先导航到第二个选项卡，然后返回第一个选项卡，它可以正常工作。我并没有像他们通常使用的那样使用角度。一切都在javascript中完成。我只是为底层用户界面提供了一个准确的app.js。

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

var myApp = angular.module（＆＃39; starter＆＃39;，[＆＃39; ionic＆＃39;，＆＃39; ngCordova＆＃39;]）

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) {

})

我的基本app结构/ 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的一些事情，与Ionic一起使用非常快。离子是一个很好的框架。

在应用启动时将所有标签加载到DOM中（使用Ionic）

1 个答案: