如何在状态加载时刷新Angular控制器?

时间:2015-03-28 07:46:56

标签: javascript angularjs controller state ionic

我正在构建角度/离子应用程序作为我的论文的一部分,并且部分功能是基于对不同部分(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}}&nbsp;</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);
        }
}]);

0 个答案:

没有答案