加载页面时多次获取请求答案

【问题标题】：Multiple get requests when loading page加载页面时多次获取请求
【发布时间】：2015-03-20 13:09:10
【问题描述】：

当我访问我的页面时，get-request 被触发了 4 次，而它应该被触发 2 次。请看下图：

这是我的代码：

index.html:

<!DOCTYPE html>
<html ng-app="cryptlib">
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta content="text/html;charset=UTF-8" http-equiv="content-type" />
</head>
<body ng-controller="firstPageController">
<div ng-view>
</div>
</body>
<script src="js/angular-file-upload-shim.min.js"></script> 
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-sanitize.js"></script>
<script src="js/angular-file-upload.min.js"></script> 
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</html>

首页.html

<link href='http://fonts.googleapis.com/css?family=Fjord+One' rel='stylesheet' type='text/css'>
<div id="layout">
    <div id="top">
        <h2>CryptLib</h2>
    </div>
    <div id="main">
        <div class="leftcontent">
            <ul>
                <li><a href="#">>> Webbutveckling</a></li>
                <li><a href="#">>> Programmering</a></li>
                <li><a href="#">>> Elektronik</a></li>
                <li><a href="#">>> Vetenskap</a></li>
                <li><a href="#">>> Övrigt</a></li>
                <li><a href="#">>> Ladda upp</a></li>
            </ul>
        </div>
        <div class="maincontent">
        <li ng-repeat="book in books track by $index">
            {{book}}
        </li>
    </div>
    <div id="bottom">
        <h3>Ladda upp {{selectedItem}}</h3>
        <input type="text" ng-model="myModelObj">
        Välj mapp:
        <select ng-model="selectedItem" ng-options="item for item in items" ng-change="change()">
        </select>
        <input type="file" ng-file-select="onFileSelect($files)">
        <!--Bild<input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">-->
    </div> 
</div>

controller.js

angular.module('cryptlib_controllers')
    .controller('firstPageController', ['$scope','$http','$location','$sce','$rootScope','$upload', function($scope, $http, $location, $sce, $rootScope, $upload) {

    $http({
        url: 'lib/actions.php',
        method: 'GET',
        params: {get_books: 1}

    }).success(function(data) {
        $scope.books = data;
    });
    $http({
        url: 'lib/actions.php',
        method: 'GET',
        params: {get_dirs: 1}
    });


    console.log($scope.books);

    $scope.onFileSelect = function($files) {
        //Vi har valt en eller flea filer
        //$files är en array innehållande de valda filerna att ladda upp. Dess namn, storlek och typ

        for(var i = 0; i < $files.length; i++)
        {
            var file = $files[i];
            $scope.upload = $upload.upload({
                url: 'lib/actions.php',
                data: {myObj: $scope.myModelObj},
                file: file

            }).progress(function(evt) {
                console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
            }).success(function(data, status, headers, config) {
                console.log(data);
            });
        }       
    };

    $scope.items = ['Programmering', 'Elektronik'];
    $scope.change = function() {
        alert($scope.selectedItem);
    }

}]).controller('bookController', ['$scope','$http','$location','$sce','$rootScope','$upload', function($scope, $http, $location, $sce, $rootScope, $upload) {
}]);

为什么当我访问页面时，get 请求被触发了 4 次？它应该只被解雇2次吗？谁能解释一下？

【问题讨论】：

标签： javascript angularjs get

【解决方案1】：

因为你定义了 firstPageController 两次。首先在body标签中，然后在路由中。

【讨论】：