AngularJS

[Cout]

Hallo
Ich möchte mit ng-repeat auf eine Funktion im Service zugreifen über einen Controller. Der Service soll aus einer SQLite Datenbank Werte auslesen.

Framework Ionic, AngularJS und Cordova

Ich bekomme aber immer diese Fehlerschleife :
Hier der Link zur Fehlerbeschreibung

HTML

        <div class="list" ng-controller="ChatCtrl">
            <a class="item item-avatar" href="#/tab/chat/{{chat.chat_id}}" ng-repeat="chat in chats.all()">
              <h2>{{chat.chat_id}}</h2>
              <p>{{chat.text}}{{chat.timestamp}}</p>
            </a>
        </div>

Controller "ChatCtrl"

.controller('ChatCtrl', function($scope, Chats) {
    $scope.chats = Chats;
});

Service "Chats"

.factory('Chats', function(DB) { 
    return {
        all: function() {             
            return DB.query('SELECT id FROM chats')
            .then(function(result){
                return DB.fetchAll(result);               
            });
        }
    };
})

Service "DB"

.factory('DB', function($q, DB_CONFIG) {
    var self = this;

    self.openDB = function() {
        // return window.sqlitePlugin.openDatabase({name: DB_CONFIG.name});
        return window.openDatabase(DB_CONFIG.name, '1.0', 'database', -1);
    };

    self.query = function(query, bindings) {
        
        bindings = typeof bindings !== 'undefined' ? bindings : [];
        var deferred = $q.defer();

        self.openDB().transaction(function(transaction) {
            transaction.executeSql(query, bindings, function(transaction, result) {
                deferred.resolve(result);
                }, function(transaction, error) {
                deferred.reject(error);
            });
        });
        return deferred.promise;
    };

    self.fetchAll = function(result) {
        var output = [];
        for (var i = 0; i < result.rows.length; i++) {
            output.push(result.rows.item(i));
        }
        return output;
    };

    self.fetch = function(result) {
        return result.rows.item(0);
    };

    return self;
})

[rkr]

Hast du verstanden, wie AngularJS merkt, wann Variablen geändert wurden (dirtychecking)? Wenn sich nach jedem Durchlauf etwas ändert, dann gibt Angular nach spätestens 10 Runden auf. Du musst da irgendwo einen Bug haben. Ich kann dir dabei gerade nicht helfen.
Vielleicht das self in der Factory? Etwas widersinnig.

[lstegelitz]

Bin jetzt nicht der Vollblutprofi in Sachen JS aber...

    self.fetchAll = function(result) {
        var output = [];
        for (var i = 0; i < result.rows.length; i++) {
            output.push(result.rows.item(i));
        }
        return output;
    };

hier machst du doch genau das, was in der Fehlerbeschreibung genannt wird. Du erzeugst ein neues (lokales!) Array mit jedem Aufruf.

One common mistake is binding to a function which generates a new array every time it is called. For example:

<div ng-repeat="user in getUsers()">{{ user.name }}</div>

...

$scope.getUsers = function() {
  return [ { name: 'Hank' }, { name: 'Francisco' } ];
};

Since getUsers() returns a new array, Angular determines that the model is different on each $digest cycle, resulting in the error. The solution is to return the same array object if the elements have not changed:

var users = [ { name: 'Hank' }, { name: 'Francisco' } ];

$scope.getUsers = function() {
  return users;
});