页面重新加载后 ng-repeat 重复项目

Question

我有一个 angularjs 应用程序，带有 node.js 和 express 后端，所以我没有使用 angular 的路由。当我使用浏览器的刷新按钮刷新页面时，页面上的我的项目以 ng-repeat 重复加载。

我不确定为什么会发生这种情况，但我想知道当页面重新加载时控制器会发生什么？旧控制器是否已销毁，并创建了一个新控制器，或者是否添加了另一个控制器，这可能导致重复？

这是我的 html 文件的一部分，以及相关的控制器代码：

(trans.html)

<div class="pure-u-1-2" ng-repeat="trans in transactions | filter:searchText">
        <div class="transaction" ng-style="{'border-style': 'solid', 'border-color': categoryColours[trans.category.name]}">
            <h2 id="transName">{{ trans.name }}</h2>
            <h4>{{ trans.description }}</h4>
            <h4>{{ trans.date }}</h4>
            <div class="pure-u-1-1">
                <h3 id="categoryLabel" ng-style="{'background-color': categoryColours[trans.category.name], color: 'white' }">{{ trans.category.name }}</p>
                    <h2 id="transType" ng-style="{'background-color': categoryColours[trans.category.name], color: 'white' }">{{trans.type}}: £{{ trans.amount }}</h2>
            </div>
            <div class="clearFix"></div>
        </div>
    </div>
</div>

(transController)

function TransController($scope, socket) {
 var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    $scope.transactions = [];
    $scope.currentMonth = months[getMonth()];
    $scope.categories = {};
    $scope.categoryColours = {};
    $scope.types = [{
        name: "Income"
    }, {
        name: "Spending"
    }];
    init();

    function init() {

        console.log("emitting init functs");
        monthDataRequest($scope.currentMonth, 'init');
        socket.emit('getCategories', {});
    };

    //sends a data request to the server the months data
    function monthDataRequest(month, type) {
        socket.emit('transDataRequest', {
            request: 'transactions',
            month: month,
            type: type
        });
    };

    function getMonth() {
        var d = new Date();
        return d.getMonth();
    };

    socket.on('categories', function (data) {
        var categories = [];
        for (var key in data.categories) {
            console.log("key: ", key);
            categories.push(key);
        }
        $scope.categories = categories;
        $scope.categoryColours = data.categories;
        console.log($scope.categories);
        $scope.safeApply();
    });


    socket.on('transResponse', function (data) {
        console.log("Data response received. month: ", data.month, " type: ", data.type);
        if (data.type == 'init') {
            console.log("setting up initial data");
            $scope.transactions = [];
            console.log("received data: ", data.data);
            $scope.currentMonth = data.month;
            $scope.transactions = [];
            var tran = data.data;
            for (var i = 0; i < tran.length; i++) {
                $scope.transactions.push(tran[i]);
                console.log("loop ", i, "data i: ", tran[i]);
            };

            $scope.safeApply();
            console.log($scope.transactions);
            console.log("CURRENT MONTH " + $scope.currentMonth);
        } else {
            console.log("was not initial data");
            $scope.transactions = [];
            console.log(data);
            var tran = data.data;
            for (var i = 0; i < tran.length; i++) {
                $scope.transactions.push(tran[i]);
                console.log(tran[i]);
            };
            $scope.safeApply();
            console.log($scope.transactions);
            console.log("CURRENT MONTH " + $scope.currentMonth);
        }
    });

对于刷新页面后为什么会显示重复交易的任何建议，我将不胜感激。

Answer 1

这真的很奇怪，如果你重新加载页面控制器会再次启动：

$scope.transactions = [];

将使交易无效 - BTW transResponse

$scope.transactions = [];
console.log("received data: ", data.data);
$scope.currentMonth = data.month;
$scope.transactions = [];

你在没有任何其他操作的情况下将其设为 null 两次，我认为你至少可以省略其中一个

此时我唯一的猜测是套接字为您提供重复的事务，或者您以某种方式将其存储在服务中（由于您没有提供套接字服务代码，因此无法判断）

你可以直接在 angularjs IRC 频道 irc.freenode.net #angularjs -> maurycyg 上找到我