我正在构建角度/离子应用程序作为我的论文的一部分,并且部分功能是基于对不同部分(character select
)的选择来更改“收集列表”。正在更新的值将保存到名为“global”的.value中,以便始终可以访问。
当我在character select
上选择一个单选按钮时,该值会正确更新,但在导航回collection list
后,更改将永远不会应用。
我看到的解决方案是让collection list
在导航时始终进行完全刷新,但是我看到的每个相关解决方案只有refreshes
当前页面,而我需要刷新页面时间我导航到它。
有什么建议吗?
编辑:对于不发布代码,我深表歉意。我假设这个场景不需要代码。
details.html
<ion-view>
<ion-content padding="true">
<br><br>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="searchFilter.dragon_name" />
</label>
</div>
{{character.character_id}} <!--Testing for updated variable-->
<ion-list>
<ion-item class="listHead" ng-hide="searchFilter">Ancient</ion-item>
<ion-item ng-repeat="content in contents | filter:{family_name:'Ancient'}:true | filter:searchFilter">
<div class="listLeft">
<img data-ng-src="img/icons/{{content.family_id}}/{{content.dragon_th}}.png" alt="{{content.dragon_name}}" class="thumb"/>
<a href="#details/{{content.dragon_id}}">
<h2 class="listTop">{{content.dragon_name}}</h2>
</a><br>
<h3 class="listBottom">{{content.family_name}}</h3><br>
<h3 class="listBottom" ng-repeat="location in content.locations">{{location.zone_name}} </h3>
</div>
<div class="listRight">
<label class="toggle">
<input type="checkbox" ng-model="hasDragon">
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
characters.html
<ion-view>
<ion-content padding="true">
<br><br><br>
<div class="nameSpread charTitle"><h4>Character Name</h4></div><div class="serverSpread"><h4>Server</h4></div>
<ion-radio class="characterSelect" ng-repeat="content in contents" ng-click="selectCharacter({{content.character_id}})" ng-model="data.characterSelection" ng-value="content.character_id">
<div class="nameSpread">{{content.character_name}}</div>
<div class="serverSpread">{{content.server_name}}</div>
</ion-radio>
</ion-content>
</ion-view>
app.js(由于文档的大小,仅发布相关代码)
var app = angular.module('ionicApp', ['ionic', 'ui.router'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
};
if(window.StatusBar) {
StatusBar.styleDefault();
};
});
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
//Home Tab
.state('home', {
url: "/",
templateUrl: "partials/home.html",
controller: 'appController'
})
//Dragons (Colour) Tab
.state('dragonsColour', {
url: "/dragonsColour",
templateUrl: "partials/dragonsColour.html",
controller: 'dragonsController'
})
//Dragons (Family) Tab
.state('dragonsFamily', {
url: "/dragonsFamily",
templateUrl: "partials/dragonsFamily.html",
controller: 'dragonsController'
})
//Dragons (Zone) Tab
.state('dragonsZone', {
url: "/dragonsZone",
templateUrl: "partials/dragonsZone.html",
controller: 'dragonsController'
})
//Characters Tab
.state('characters', {
url: "/characters",
templateUrl: "partials/characters.html",
controller: 'charactersController'
})
$urlRouterProvider.otherwise('/');
});
app.value('global', {
characterID: '1'
});
//Blank/Home placeholder
app.controller('appController', ['$scope', '$http', '$state', function ($scope, $http, $state) {
}]);
//Dragon List
app.controller('dragonsController', ['$scope', '$http', '$ionicPopup', '$ionicActionSheet', '$state', '$ionicLoading', '$timeout', 'global', function ($scope, $http, $ionicPopup, $ionicActionSheet, $state, $ionicLoading, $timeout, global) {
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
});
$timeout(function () {
$ionicLoading.hide();
$http.get('dragons.json')
.success(function(data) {
$scope.contents = data;
});
}, 1500);
$http.get('progress.json')
.success(function(data) {
$scope.progress = data;
characterIdToFind = global.characterID;
var foundCharacter = null;
for (var i in data) {
var character = data[i];
if (character.character_id == characterIdToFind) {
foundCharacter = character;
break;
}
}
if (foundCharacter === null) {
alert('oh no! didnt find a character!');
}
});
$scope.zonefilter = {};
$scope.sharePrompt = function() {
$scope.data = {}
var myPopup = $ionicPopup.show({
template: '<input type="email" ng-model="data.searchUser">',
title: 'Enter User Email',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.searchUser) {
$scope.showAlert();
console.log('No Content Input');
e.preventDefault();
} else {
console.log('Input:', $scope.data.searchUser);
}
}}]
});
};
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Error',
template: 'Please enter a valid email address'
});
alertPopup.then(function(res) {
console.log('Try again!');
});
};
$scope.sortPrompt = function() {
var hideSheet = $ionicActionSheet.show({
buttons: [
{text: 'Colour'},
{text: 'Family' },
{text: 'Zone' }
],
titleText: 'Select a category to sort by',
cancelText: 'Cancel',
cancel: function() {},
buttonClicked: function(index) {
console.log('BUTTON CLICKED', index);
if(index == 0) {console.log('colour'); $state.go('dragonsColour');}
if(index == 1) {console.log('family'); $state.go('dragonsFamily');}
if(index == 2) {console.log('zone'); $state.go('dragonsZone');}
return true;
}
});
};
}]);
//Character
app.controller('charactersController', ['$scope', '$http', 'global', function($scope, $http, global) {
$http.get('characters.json')
.success(function(data) {
$scope.contents = data;
});
$scope.data = {
characterSelection: global.characterID
};
$scope.selectCharacter = function(character) {
global.characterID = character
console.log(character);
}
}]);