Question

我正在使用Ionic Framework开发混合应用程序。但是，当用户返回混合应用程序时，我的应用程序在双重绑定中失败应用程序能够从localstorage检索Array对象，但我的ngrepeats无法加载我从localstorage分配的var。以下是我的代码。

controller.js

.controller('ChatsCtrl', ['$scope','$state', '$ionicTabsDelegate' , '$ionicListDelegate', '$rootScope'
    ,function($scope,$state,$ionicTabsDelegate, $ionicListDelegate, $rootScope) {

        var channel_list = [];
        channel_list =   localStorage.getItem("channel_list");
        $scope.chats = channel_list;
}])

HTML文件

<ion-view cache-view="false" view-title="DRDM Chat"> 
     <div class="bar bar-header bar-calm">
            <div class="h1 title">DRDM Chat</div>
    </div>
    <ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
        <br><br>
        <ion-list>
            <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom({{'chat.displayName'}}, {{'chat.channelID'}})">
                <img ng-src="data:image/png;base64,{{chat.profilePicture}}">
                <h2>{{chat.displayName}}</h2>
                <p>{{chat.lastText}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>
                <ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

Answer 1

JS

    var channel_list = [];
    channel_list =   localStorage.getItem("channel_list");
    $scope.chats = JSON.parse(channel_list);

HTML文件

<ion-view cache-view="false" view-title="DRDM Chat"> 
 <div class="bar bar-header bar-calm">
        <div class="h1 title">DRDM Chat</div>
</div>
<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">
    <br><br>
    <ion-list>
        <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" ng-click="chatRoom(chat.displayName,chat.channelID)">
            <img ng-src="data:image/png;base64,{{chat.profilePicture}}">
            <h2>{{chat.displayName}}</h2>
            <p>{{chat.lastText}}</p>
            <i class="icon ion-chevron-right icon-accessory"></i>
            <ion-option-button class="button-assertive" ng-click="remove($index, chat.channelID)">Delete</ion-option-button>
        </ion-item>
    </ion-list>
</ion-content>

ng-click="chatRoom(chat.displayName,chat.channelID)传递这样的价值。

Answer 2

尝试在页面加载时调用一个函数来重新初始化列表，如下所示

Controller.js

 $scope.init = function(){      
    var channel_list = [];
        channel_list =   localStorage.getItem("channel_list");
        $scope.chats = JSON.parse(channel_list);
    }
    $scope.init();

并确保当您访问此页面时，此功能会被触发。注意：如果您在同一页面上并希望重新绑定列表，则在goBack（）或goForward（）函数中调用此函数。

希望这能解决你的问题。

Ionic Cordova：Angualarjs双重绑定不起作用

2 个答案: