javascript - 使用 AngularJS 从手风琴组打开的 $http.get 加载

Question

我正在使用 Angular v1.2.0rc1 和 Angular-UI Bootstrap。

[编辑] 我想要的是在使用手风琴时带有缓存的按需加载。

我正在使用这里的手风琴组。有一些后端要求：我只想在手风琴打开（单击）时加载手风琴内部的内容。

然后，我希望缓存该响应，以便您可以根据需要打开/关闭任意数量，而不会使服务器超载。

我尝试在标题上使用 ng-click，但它通过 AngularUI Bootstrap 被覆盖。

有没有办法解决这个问题？

Answer 1

您可以使用手风琴标题标签来捕捉 ng-click

<div accordion ng-controller="AccordionCtrl">
  <div accordion-group ng-repeat="group in groups">
    <div accordion-heading >
      <div ng-click='loadGroup(group)'>
        {{group.title}}        
      </div>
    </div>
    {{group.loaded}}
  </div>
</div>  

用这个控制器

var AccordionMenuCtrl = ['$scope', '$http' function ($scope, $http) {
  $scope.groups = [
    {
      url: 'http://whatever',
      title: 'whatever'
    },
    {
      url: 'http://whatever_else',
      title: 'whatever else'
    }
  ]

  $scope.loadGroup = function (group) {
    $http.get(group.url).success(function (data) {
      group.loaded = data
    });
  }
}];