Question

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

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

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

（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 = [];

你没有任何其他动作就把它空了两次，我想你可以省略其中一个

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

你可以直接在angularjs上看到我IRC channgel irc.freenode.net #angularjs - ＆gt; maurycyg

页面重新加载后重复重复项目

1 个答案: