【发布时间】：2015-01-07 03:36:45
【问题描述】：
Angular 和 ui 引导程序非常新。我有一个标签集如下：
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDemoCtrl">
<hr />
<tabset align="left">
<tab heading="Account">Account content</tab>
<tab heading="Policy">Policy content</tab>
<tab heading="LoB">LOB content</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
javascript 为：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {
});
现在我想增强上面的例子，使 Tab 的内容是动态的。我需要通过调用 Web 服务来获取数据。比如说当我点击 Account Tab 时，会调用函数 LoadProducts 并加载数据。
我会更改 javascript 以包含如下所示的函数 LoadProducts：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {
$scope.LoadProducts = function() {
$scope.loading = true;
var PnrUrlLoadProducts = PNRfolder +
'/Portal/WebServices/PNRServices.asmx/getPNRProducts';
$http(
{
method: 'POST',
//url: '/Portal/WebServices/PNRServices.asmx/getPNRProducts',
url: PnrUrlLoadProducts,
data: { 'businessUnit': $scope.businessUnit.desc },
headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' },
cache: $templateCache
}).
success(function(data, status, headers, config) {
...
...
}).
现在我不知道如何在单击“帐户”选项卡时调用 Loadproducts。请问，有人可以帮忙吗？
我更改了代码以包含关于 ng-click 的功能。这不起作用。请看下面：
<html ng-app="ui.bootstrap.demo">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDemoCtrl">
<hr />
<tabset align="left">
<tab heading="Account" ng-click ="ShowTest">Account content</tab>
<tab heading="Policy">Policy content</tab>
<tab heading="LoB">LOB content</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
</body>
</html>
javascript：
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {
$scope.ShowTest = function() {
$scope.loading = true;
alert("in accounts");
}
});
单击“帐户”选项卡时没有任何反应。它仍然显示静态文本。
************ 重新访问了我的代码 *************** 我确实更改了我的代码，如下所示，但仍然在单击帐户选项卡时，未调用函数 ShowTest。
HTML 是：
<html ng-app="ui.bootstrap.testData">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
<link href="css/bs/bootstrap.css" rel="stylesheet"/>
<style type ="text/css" >
.SpanStyle
{
text-align: center;
color:blue;
}
</style>
</head>
<body>
<form id="formTabs" runat="server">
<div>
<div ng-controller="TabsDataCtrl">
<hr />
<tabset align="left">
<tab heading="Account" ng-click ="ShowTest">Account content
<div id ="TestAcccount"> <span class="SpanStyle">Test</span></div>
</tab>
<tab heading="Policy">Policy content</tab>
<tab heading="LoB">LOB content</tab>
<tab heading="Coverage">Coverage content</tab>
<tab heading="Detailed Loss">Detailed Loss</tab>
</tabset>
</div>
</div>
</form>
</body>
</html>
<script src="jsNew/angular.js" type ="text/javascript"></script>
<script type ="text/javascript" >
$(window).load(function() {
$("#TestAcccount").hide();
});
</script>
javascript如下：
angular.module('ui.bootstrap.testData', ['ui.bootstrap']);
angular.module('ui.bootstrap.testData').controller('TabsDataCtrl', function($scope) {
alert("module");
$scope.ShowTest = function() {
alert("scope");
$scope.loading = true;
var PnrUrlBU = PNRfolder + '/Portal/WebServices/PNRServices.asmx/getPNRBusinessUnits';
$http({
method: 'POST',
//url: '/Portal/WebServices/PNRServices.asmx/getPNRBusinessUnits',
url: PnrUrlBU,
data: {},
headers: { 'Content-Type': 'application/json; charset=uf-8', 'dataType': 'json' }
}).
success(function(data, status, headers, config) {
$scope.loading = false;
//$scope.businessUnits = data.d;
//$("#ddBusinessUnits").removeAttr("disabled");
// $scope.GetPNRHistory();
$("#TestAcccount span.SpanStyle").text("The business unit:" + data.d);
$scope("#TestAcccount").show();
}).
error(function(data, status) {
$scope.loading = false;
alert("Request Failed GetBusinessUnits");
});
}
});
显示第一个警报“模块”，但不显示第二个警报“范围”。这意味着函数 ShowTest 永远不会被触发。
【问题讨论】：
-
您需要更多帮助吗？
标签： javascript html angularjs angular-ui-bootstrap