Ajax 如何使用AngularJS在可折叠面板中延迟加载内容
我正在构建一个应用程序，它使用组件渲染一系列面板，所有面板最初都将处于折叠状态 由于页面可能包含许多这样的面板，并且每个面板都可能包含大量内容，因此在用户展开任何面板时执行AJAX调用，根据需要填充这些面板似乎是合适的 页面的动态内容（包括面板的标记）是使用AngularJS呈现的，我假设可以将AngularJS配置为绑定到面板元素上的事件，这会导致在它们展开时延迟加载它们的内容 不幸的是，在看过AngularJS文档和可用的教程之后，我看不出如何最好地解决这个问题。有人能解释一下吗 提前感谢,Ajax 如何使用AngularJS在可折叠面板中延迟加载内容,ajax,twitter-bootstrap,angularjs,lazy-loading,Ajax,Twitter Bootstrap,Angularjs,Lazy Loading,我正在构建一个应用程序，它使用组件渲染一系列面板，所有面板最初都将处于折叠状态 由于页面可能包含许多这样的面板，并且每个面板都可能包含大量内容，因此在用户展开任何面板时执行AJAX调用，根据需要填充这些面板似乎是合适的 页面的动态内容（包括面板的标记）是使用AngularJS呈现的，我假设可以将AngularJS配置为绑定到面板元素上的事件，这会导致在它们展开时延迟加载它们的内容 不幸的是，在看过AngularJS文档和可用的教程之后，我看不出如何最好地解决这个问题。有人能解释一下吗 提前感谢,
蒂姆@Tim Coulter，我根据@Stewie的想法创造了一些东西 当然可以改进，但我想这是一个很好的起点 我创建了一个小指令来绑定手风琴面板的点击事件。触发单击事件时，我通过
panel template=主模板
它引用了包含每个面板内容的两个html文件（panel1.html和panel2.html）。
我建议创建一个服务，通过AJAX获取这些文件——这正是您想要的方式。
在下面的代码中，我为此创建了一个名为dataService
的服务，您应该将其绑定到click
事件，以便在用户单击时根据需要加载文件
请注意，主模板是所有手风琴的通用面板，因此当它更改时，所有手风琴将具有相同的内容，但我假设您希望一次只显示一个面板，对吗
不管怎样，正如我之前所说，可以改进逻辑来修复这些小问题，但我相信核心功能是从这里开始的。：）
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'AccordionDemoCtrl'，['$scope'，'dataService'，function（$scope，dataService）{
$scope.oneAtATime=true；
$scope.main模板=“”；
$scope.groups=[
{
id:“001”，
标题：“动态组标题-1”，
内容：“动态组体-1”，
模板：“panel1.html”
},
{
id:“002”，
标题：“动态组标题-2”，
内容：“动态群组主体-2”，
模板：“panel2.html”
}
];
}]);
工厂（'dataService'，['$http'，函数（$http）{
返回{
getData:function（）{
return//在此处输入AJAX内容数据；
}
}
}]);
myApp.directive（'accordionToggle'，[函数（）{
返回{
限制：“C”，
范围：{
mainTemplate:“=”，
panelTemplate:“@”
},
链接：功能（范围、要素、iAttrs）{
元素绑定（'click'，函数（e）{
scope.mainTemplate=scope.panelTemplate；
作用域：$apply（）；
});
}
};
}]);
@Tim Coulter，我根据@Stewie的想法创造了一些东西
当然可以改进，但我想这是一个很好的起点
我创建了一个小指令来绑定手风琴面板的点击事件。触发单击事件时，我通过panel template=
属性传递了面板模板，它更新了面板内部使用的主模板
它引用了包含每个面板内容的两个html文件（panel1.html和panel2.html）。
我建议创建一个服务，通过AJAX获取这些文件——这正是您想要的方式。
在下面的代码中，我为此创建了一个名为dataService
的服务，您应该将其绑定到click
事件，以便在用户单击时根据需要加载文件
请注意，主模板是所有手风琴的通用面板，因此当它更改时，所有手风琴将具有相同的内容，但我假设您希望一次只显示一个面板，对吗
不管怎样，正如我之前所说，可以改进逻辑来修复这些小问题，但我相信核心功能是从这里开始的。：）
var myApp=angular.module（'myApp'，[]）；
myApp.controller（'AccordionDemoCtrl'，['$scope'，'dataService'，function（$scope，dataService）{
$scope.oneAtATime=true；
$scope.main模板=“”；
$scope.groups=[
{
id:“001”，
标题：“动态组标题-1”，
内容：“动态组体-1”，
模板：“panel1.html”
},
{
id:“002”，
标题：“动态组标题-2”，
内容：“动态群组主体-2”，
模板：“panel2.html”
}
];
}]);
工厂（'dataService'，['$http'，函数（$http）{
返回{
getData:function（）{
return//在此处输入AJAX内容数据；
}
}
}]);
myApp.directive（'accordionToggle'，[函数（）{
返回{
限制：“C”，
范围：{
mainTemplate:“=”，
panelTemplate:“@”
},
链接：功能（范围、要素、iAttrs）{
元素绑定（'click'，函数（e）{
scope.mainTemplate=scope.panelTemplate；
作用域：$apply（）；
});
}
};
}]);
这是
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AccordionDemoCtrl', ['$scope', 'dataService', function ($scope, dataService) {
$scope.oneAtATime = true;
$scope.mainTemplate = '';
$scope.groups = [
{
id: "001",
title: "Dynamic Group Header - 1",
content: "Dynamic Group Body - 1",
template: "panel1.html"
},
{
id: "002",
title: "Dynamic Group Header - 2",
content: "Dynamic Group Body - 2",
template: "panel2.html"
}
];
}]);
myApp.factory('dataService', [ '$http', function($http){
return {
getData: function() {
return // you AJAX content data here;
}
}
}]);
myApp.directive('accordionToggle', [function () {
return {
restrict: 'C',
scope: {
mainTemplate: '=',
panelTemplate: '@'
},
link: function (scope, element, iAttrs) {
element.bind('click', function(e){
scope.mainTemplate = scope.panelTemplate;
scope.$apply();
});
}
};
}]);
</script>
</head>
<body ng-controller="AccordionDemoCtrl">
<div class="accordion" id="accordionParent">
<div class="accordion-group" ng-repeat="group in groups" >
<div class="accordion-heading">
<a class="accordion-toggle" main-template="$parent.mainTemplate" panel-template="{{ group.template }}" data-toggle="collapse" data-parent="#accordionParent" href="#collapse{{ $parent.group.id }}">
Collapsible Group Item {{ $parent.group.id }}
</a>
</div>
<div id="collapse{{ group.id }}" class="accordion-body collapse">
<div class="accordion-inner">
<div class="include-example" ng-include="mainTemplate"></div>
</div>
</div>
</div>
</div>
</body>
</html>
<accordion>
<accordion-group
heading=""
ng-repeat="foo in bar"
ng-init="status = {load: false}"
ng-click="status.load = true">
<myDirective ng-if="status.load"></myDirective>
</accordion-group>
</accordion>