我有一个带有选项卡式界面的应用程序,它由三个选项卡组成。当用户在 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>
最佳答案
实际上,在重新阅读你的问题后,你想以不同的方式来做。单击选项卡后,它就会被放置在堆栈上并呈现内容,这就是为什么它仅在您前后插入时才起作用。更好的方法是通过在服务中保存 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。
非常漂亮的类(class),可以让您快速了解有关 AngularJS 的一些知识,以便与 Ionic 一起使用。 Ionic 是一个很棒的框架。
关于javascript - 在应用程序启动时将所有选项卡加载到 DOM 中(使用 Ionic),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29638554/