0

这有点复杂。我会尽力解释我的问题。

首先，我创建一个HttpServiceto wrap$http以便每个 ajax 都会触发#loading元素以显示请求正在处理。这是下面的服务。

angular.module('HttpServices', [])
.factory('HttpWrapper', ['$http', '$rootScope', function($http, $rootScope) {
  $http.defaults.transformRequest.push(function(data) {
    $rootScope.loading = ($rootScope.loading ? $rootScope.loading + 1 : 1);
    console.log('start request') # this will be triggered by template load!!
    console.log(data); # the template will be printed to the console!!
    return data;
  });
  $http.defaults.transformResponse.push(function(data) {
    $rootScope.loading -= 1;
    console.log('finish request');
    console.log(data);
    return data;
  });
  return $http;
}]);

然后，我有一条简单的路线。

@myapp = angular.module('myapp', ['HttpServices'])

myapp.factory('Service', ['HttpWrapper', ($http) ->
  service = {}
  service.data = [1..3]
  service
])

myapp.config (['$routeProvider', ($routeProvider) ->
  $routeProvider
    .when('/', {
      templateUrl: 'home.html',
      resolve: {
        data: ['Service', (Service) ->
          Service.data
        ]
      }
    })
    .when('/test', {
      templateUrl: 'test.html'
    })
])

然后html也很简单。

  <div data-ng-app='myapp'>
    <ul>
      <li><a href="#/">home</a></li>
      <li><a href="#/test">test</a></li>
    </ul>
    <div id="loading" ng-show="loading">loading</div>
    <div ng-view></div>
    <script type="text/ng-template" id="home.html">
      home
    </script>
    <script type="text/ng-template" id="test.html">
      test
    </script>
  </div>

看，模板只是内联模板。它们只是隐藏在ng-view元素后面。但是当我单击链接 #/或链接 #/test时，将触发http 包装器，就像发送 ajax 请求一样。为什么？它们只是内联模板。为什么触发$http？实际上没有与后端的通信。

4

2 回答 2

0

这是我的解决方案。

myapp.config (['$routeProvider', ($routeProvider) ->
  $routeProvider
    .when('/', {
      template: $('#home_html').html(),
      resolve: {
        data: ['Service', (Service) ->
          Service.data
        ]
      }
    })
    .when('/test', {
      template: $('#test_html').html()
    })
])

我认为关键字templateUrl将始终触发 $http 即使它是内联脚本标记。所以不要使用它。

于 2013-06-16T14:24:30.537 回答
0

我也有同样的问题。它会生成一个新的 http 请求，因为您放在内联脚本标签上的 ID 与 templateUrl 中的 ID 不匹配。

Angular 首先在其内部的内联模板缓存中检查这些 url，然后再通过网络进行实际查找

查看此链接Using Inline Templates in Angular

于 2014-02-22T19:44:34.600 回答