Question

我遇到app.controller＆＃34; TestCtrl＆＃34;在HTML页面中工作。我认为app.controllers可能会出现某种中断，当我自己尝试app控制器时它会起作用。但是，当我添加其他控制器时，它们不会相应地工作。可以帮我解决问题，并向我解释我做错了什么？

＆＃13;

(function(){
var app = angular.module('AVS', []);
  
  app.controller('TestCtrl', function($scope){
  var tabClasses;
  
  function initTabs() {
    tabClasses = ["","","",""];
  }
  
  $scope.getTabClass = function (tabNum) {
    return tabClasses[tabNum];
  };
  
  $scope.getTabPaneClass = function (tabNum) {
    return "tab-pane " + tabClasses[tabNum];
  }
  
  $scope.setActiveTab = function (tabNum) {
    initTabs();
    tabClasses[tabNum] = "active";
  };
  
  $scope.tab1 = " 555dsadsa";
  $scope.tab2 = "dsadasa ";
  $scope.tab3 = "dsadas ";
  $scope.tab4 = "dsadsa ";
  
  //Initialize 
  initTabs();
  $scope.setActiveTab(1);
});
  

  app.controller('StoreController',function(){
    this.products = disciplines;
  });
  
  app.controller('FloorDrawings', function(){
    this.floors = drawings;
  });
  
  app.controller('GearNavigation', function(){
    this.gearnav = gnavigation;
  });
  
  app.controller('Reports', function (){
    this.reports = nameofreports;
    
  });
  
  app.controller('DrawingSelection', function (){
    this.selection = drawselect;
  });
  
  
  var disciplines = [
        {name:'Link1',link:'#', status: 'active-link'},
        {name:'Link2 ',link:'#', status: 'active-link'},
        {name:'Link3 ',link:'#', status: 'active-link'},
        {name:'Link', link:'#', status: 'inactive-link disabled'},
        {name:'Link', link:'#', status: 'active-link'},
        {name:'Link', link: '#', status: 'active-link'},
        {name:'Link', link: '#', status: 'inactive-link disabled'},
        {name:'Link', link: '#', status: 'active-link'},
        {name:'Link', link: '#', status: 'active-link'},
        {name:'Link', link: '#', status: 'active-link'},
        {name:'Link', link: '#', status: 'inactive-link disabled'},
        {name:'Link', link:'#', status: 'active-link'},
        {name:'Link', link:'#', status: 'active-link'},
        {name:'Link', link:'#', status: 'active-link'}
    ];
  
  var drawings = [
    {floors: 'Ground Floor', initials: 'GR', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file1' status:'active-link'},
    {floors: '1st Floor', initials: '01', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file2' status:'active-link'},
    {floors: '2nd Floor', initials: '02', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file3' status:'active-link'},
    {floors: '3rd Floor', initials: '03', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file4' status:'active-link'},
    {floors: '4th Floor', initials: '04', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file5' status:'active-link'},
    {floors: '5th Floor', initials: '05', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file6' status:'active-link'},
    {floors: '6th Floor', initials: '06', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file7' status:'active-link'},
    {floors: '7th Floor', initials: '07', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file7' status:'active-link'},
    {floors: '8th Floor', initials: '08', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file7' status:'active-link'},
    {floors: 'Penthouse', initials: 'PH', labelname: 'PDF', labelname2: 'DWF', labelname3: 'CAD', filenumber: 'file8' status:'active-link'}
    ]; 
  
  var gnavigation = [
    {linkname: 'Dashboard', link: '#'},
    {linkname: 'Downloads', link: '#'},
    {linkname: 'Tutorial', link: '#'},
    {linkname: 'Log-out', link: '#'}
  ];
  
  var nameofreports = [
    {reportname:'Location Query', link: '#',status:'active-link'},
    {reportname:'Cost Center Query', link: '#',status:'active-link'},
    {reportname:'Department Query', link: '#',status:'active-link'},
    {reportname:'Hatch Query', link: '#',status:'active-link'},
    {reportname:'Chart Location Query', link: '#',status:'active-link'}
  ];
  
  var drawselect = [
    {drawingname: 'Draw1', link:'#', status:'active-link'},
    {drawingname: 'Draw2', link:'#', status:'inactive-link disabled'},
    {drawingname: 'Draw3', link:'#', status:'inactive-link disabled'},
    {drawingname: 'Draw4', link:'#', status:'inactive-link disabled'}
  ];


})();

＆＃13;

<!DOCTYPE html>

<html ng-app="AVS">

  <head>
     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script src="angjs.js"></script>
  </head>

<style>
ul {
  list-style: none;
}

.btn-navigation {
  width: 160px;
}

.inactive-link {
  color: gray;
}

.tab-content {
  margin:0;
  padding:0;
}
.content {
  margin:1em;
  padding:1em;
}
/*
ul, li, div {
    border:1px dotted gray;
}
*/
</style>

 <div ng-controller='TestCtrl'>
      <div class="tabbable tabs-left">
            <ul class="nav nav-tabs">
               <li ng-class="getTabClass(1)" ng-click="setActiveTab(1)"><a href="#deal" data-toggle="tab">Tab 1</a></li>
               <li ng-class="getTabClass(2)" ng-click="setActiveTab(2)"><a href="#bond" data-toggle="tab">Tab 2</a></li>
               <li ng-class="getTabClass(3)" ng-click="setActiveTab(3)"><a href="#collateral" data-toggle="tab">Tab 3</a></li>
               <li ng-class="getTabClass(4)" ng-click="setActiveTab(4)"><a href="#rating" data-toggle="tab">Tab 4</a></li>
            </ul>
          <div class="tab-content">
                  <div ng-class="getTabPaneClass(1)" id="deal" class="content">{{tab1}}</div>       
                  <div ng-class="getTabPaneClass(2)" id="bond" class="content">{{tab2}}</div>
                  <div ng-class="getTabPaneClass(3)" id="collateral" class="content">{{tab3}}</div>
                  <div ng-class="getTabPaneClass(4)" id="rating" class="content">{{tab4}}</div>      
          </div>
      </div>

  </div>
</html>

＆＃13;

Angular.JS app.controller无法在html页面中工作

0 个答案: