如何在表单/窗口加载时调用函数以使用角度引导显示第一个选项卡的动态内容答案

【问题标题】：How to call the function to display dynamic contents of first tab using angular bootstrap when the form / window loads如何在表单/窗口加载时调用函数以使用角度引导显示第一个选项卡的动态内容
【发布时间】：2015-02-10 06:50:07
【问题描述】：

我正在使用 angualr 引导选项卡，我知道选项卡上的 ng-click 事件会在单击选项卡时触发任何功能。

我希望在表单加载时在第一个选项卡上加载一些动态内容。 HTML 是：

  <html ng-app="ui.bootstrap.testData">
   <head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title> Tabs</title>
   <link href="css/en/bootstrap.css" rel="stylesheet" type="text/css" />  
   <link href="css/en/style.css" rel="stylesheet" type="text/css" />  
   <link href="css/en/ng-grid.css" rel="stylesheet" type="text/css" />
   <link href="css/en/jquery-ui.css" rel="stylesheet" type="text/css" />
   <link href="css/en/easyui.css" rel="stylesheet" type="text/css" />
  <link href="css/en/icon.css" rel="stylesheet" type="text/css" />
  <link href="css/en/demo.css" rel="stylesheet" type="text/css" />
   </head>
    <body>
     <form id="formTabs" runat="server">
  <div>
        <div ng-controller="TabsDataCtrl">
          <hr />
          <tabset align="left">
           <tab heading="Account" ng-click ="ShowAccount()">
                <div id ="divAccount">
                    <div id ="TestAcccount"  style="padding-top:30px;" align ="center">
                     <table  id="PNRDataGrid" width="100%"></table>
                   </div>
                </div>
            </tab>
               <tab heading="Policy">Policy content
                    <div>
                    <table border ="1" style ="background-color :blue"><tr><td> Test</td></tr>
                   </table>
                    </div>
             </tab>
               <tab heading="LoB" ng-click ="ShowLob()">LOB content
                </div>
              </tab>
             <tab heading="Coverage">Coverage content</tab>
            <tab heading="Detailed Loss">Detailed Loss</tab>
           </tabset>
        </div>
      </div>
     </form>
   </body>
 </html>
 <script src="js/angular.js" type="text/javascript"></script>
 <script src="js/ui-bootstrap-tpls-0.11.2.js" type ="text/javascript"></script>
 <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="js/LossHistory.js" type="text/javascript"></script>
 <script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
 <script src="js/DataScrolling.js" type="text/javascript"></script>
 <script src="js/jquery.easyui.min.js" type="text/javascript"></script>
  <script src="js/ng-grid.js" type="text/javascript"></script>

js文件为：

 angular.module('ui.bootstrap.testData', ['ui.bootstrap']);
 angular.module('ui.bootstrap.testData').controller('TabsDataCtrl', function($scope, $http) {

$scope.businessUnits = [];
$scope.lossHistory = [];

$scope.ShowAccount = function() {
    $scope.loading = true;

    var svcAccountURL = LHServiceDir + 
    '/Portal/WebServices/LossHistoryServices/LossHistoryServices.asmx/GetDetails';

  ....
  ....
  }

是否有任何选项卡事件会在加载表单或任何其他方式会触发 ShowAccount 函数时触发。谢谢。

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

你可以使用类似 ng-init 的东西

     <div ng-init="ShowAccount()">
        // all your tabs here
     </div>

假设 ShowAccount() 刚刚关闭，然后填充了一些数据，那么一旦页面出现，这些数据就会准备好显示。您也可以在控制器末尾调用“ShowAccount()”，它会在控制器加载时调用。

【讨论】：

为什么不起作用。如果我不知道为什么，我无法帮助你。我做了这样的事情，它工作得很好。

【解决方案2】：

您可以在其中一个控制器中调用angular.element(document).ready(function(){ ... })：

代码片段：

angular.element(document).ready(function () {
    console.log('In Angular Element Ready');
    myInitFunction();
});

这在 Chrome 中对我有用，虽然我在 Firefox 中看到了问题。

【讨论】：