11

我正在使用 Angular 开发一个页面，并且在我的控制器中有一个 init() 方法。代码如下：

var filtersController = ['$scope', '$http', function ($scope, $http) {
    $scope.init = function () {
        $http({
            method: 'GET',
            url: '/json-tags-test',
            cache: true
        }).success(function (data, status, headers, config) {
                // this callback will be called asynchronously
                // when the response is available
        }).error(function (data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
   };
}];

这只是对简单 JSON 文件的调用。

我的HTML如下：

<div class="container main-frame" ng-app="projectsApp" ng-controller="filtersController" ng-init="init()">
</div>

出于某种原因，每次我加载页面时，这个 get 调用都会被调用两次。这是标准行为吗？

非常感谢，

短跑

在此处输入图像描述

4

3 回答 3

53

这个问题也可能是由于ng-app你的控制器有一个 with 路由和ng-controller你的页面中的一个引用。例如，如果您的应用看起来像：

<html lang="en" ng-app="myApp">
<head>...</head>
<body>
<div ng-controller="myController">
...
</div>
</body>
</html>

定义应用程序的 Javascript：

angular.module('myApp',[]) {
$routeProvider.when('/path', {templateUrl: '...', controller: myController);

在上面的例子中，通过定义到 myController 的路由，控制器将被实例化两次，您将看到两个调用，如所述。

更新

上面的代码描述了问题所在，但缺少正确的解决方案，因此我根据@Intrepid 评论更新了答案。

如果您已在路由中定义，则需要ng-controller="myController"从您的 html 模板中删除。

于 2014-02-05T17:55:33.020 回答
5

我不认为它被调用了两次，我只是创建了一个plunk让你看到这个。

var app = angular.module('projectsApp', []);
app.controller('filtersController', ['$scope', '$http', function ($scope, $http) {
  $scope.status = 'Page loading';
  var count = 0;
    $scope.init = function () {
      $scope.status = 'API called';
        $http({
            method: 'GET',
            url: '/json-tags-test',
            cache: true
        }).success(function (data, status, headers, config) {
                // this callback will be called asynchronously
                // when the response is available
            console.log('success');
            count++;
            $scope.status = 'successful: '+ count;
        }).error(function (data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            console.log('error');
            count++;
            $scope.status = 'failed times: '+ count;
        });
   };
}]);

来自 DEV 工具的 XHR 日志

网络控制台只有一个 HTTP 调用

编辑：

使用虚拟 json 文件更新 plunk

http://plnkr.co/edit/hTdtLK?p=preview

在日志中看到的相同

正如您再次看到的那样，它只被调用一次。清除日志我猜你看到的是上一页加载的日志，因为在预览模式下更改会立即可见。

于 2013-07-31T10:18:06.760 回答
0

如果您使用的是 UI-Router，最好在配置中使用 controllerAs 并在视图中删除 ng-controller。

 .state('master.userlist', {
               url: "userlist",
               views: {
                   userlist: {
                       templateUrl: 'app/user/userlist.html', 
                       controller: 'UserController',
                       controllerAs:'vm'
                   },
                   'detail@master.userlist': {
                       templateUrl: 'app/user/userdetail.html'
                   },
               }
           });

于 2017-12-18T12:11:18.970 回答