動態標籤更新引發的角度範圍問題

我試圖用ng-click事件點擊標籤時顯示角度發佈數據。但它不工作。動態標籤更新引發的角度範圍問題

我在做什麼錯在這裏？代碼第一部分工作正常切換標籤，但我也想表明，當任何選項卡單擊&使用它的tabNum動態響應？ID = tabNum在AJAX POST

angular.module('tabApp', []) 
    .controller('TabController', ['$scope', function($scope, $http) { 
    $scope.tab = 1; 

    $scope.setTab = function(newTab){ 
     $scope.tab = newTab; 
    }; 

    $scope.isSet = function(tabNum){ 
     return $scope.tab === tabNum; 

    }; 

}]);

我有問題，下面的代碼，我應該在哪裏放置它？

$http.get('http://localhost:8080/welcome.html?id=$tabNum') 
    .success(function(data, status, headers, config) { 
     $scope.tab = data; 
    }) 
    .error(function(data, status, headers, config) { 
     // log error 
}); }]);

這是我的HTML頁面

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>MY

報告

<link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'> 

     <link rel="stylesheet" href="style.css"> 


</head> 

<body> 
    <div class="container" ng-app="tabApp"> 
    <div class="row" ng-controller="TabController"> 
    <div class="col-md-3"> 
     <ul class="nav nav-pills nav-stacked"> 
     <li ng-class="{ active: isSet(1) }"> 
      <a href ng-click="setTab(1)">SHOW Manual Admins</a> 
     </li> 
     <li ng-class="{ active: isSet(2) }"> 
      <a href ng-click="setTab(2)">SHOW ONE Admins</a> 
     </li> 
     <li ng-class="{ active: isSet(3) }"> 
      <a href ng-click="setTab(3)">SHOW TWO Read Admins</a> 
     </li> 
     <li ng-class="{ active: isSet(4) }"> 
      <a href ng-click="setTab(4)">SHOW THREE Admins</a> 
     </li> 
     <li ng-class="{ active: isSet(5) }"> 
      <a href ng-click="setTab(5)">SHOW FOUR Read Admins</a> 
     </li> 
     <li ng-class="{ active: isSet(6) }"> 
      <a href ng-click="setTab(6)">SHOW FIVE Read Admins</a> 
     </li> 
     </ul> 
    </div> 
    <div class="col-md-8"> 
     <div class="jumbotron"> 
     <div ng-show="isSet(1)"> 
      <h1>CONTENT1</h1> 
      </div> 
      <div ng-show="isSet(2)"> 
      <h1>CONTENT2</h1> 
     </div> 
     <div ng-show="isSet(3)"> 
      <h1>CONTENT3</h1> 
     </div> 
     <div ng-show="isSet(4)"> 
      <h1>CONTENT4</h1> 
     </div> 
     <div ng-show="isSet(5)"> 
      <h1>CONTENT5</h1> 
     </div> 
     <div ng-show="isSet(6)"> 
      <h1>CONTENT6</h1> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js'></script> 

    <script src="app.js"></script> 

</body> 
</html>

來源

2017-10-11 serverliving.com

只需創建一個服務，您可以在其中進行http調用並從您的控制器調用它。如果你需要更多的細節告訴我 – stackg91

嘿在我的評論中提到，你可以使用的服務，爲您的HTTP調用

.service('HttpService', ['$rootScope', '$http', 'Ls', 'CommonService', 'DateService', function ($rootScope, $http, Ls, CommonService, DateService) { 
     return { 
      CallService: function (url, callback) {     
       $http.get(url) 
        .success(function (data, status) {        
         callback(data, status); 
        }).error(function (data, status) { 
         callback(data, status); 
        });     
      } 
     } 
    });

可以從控制器調用（不要忘記注入HttpService）

.controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) { 
     $scope.tab = 1; 

     $scope.setTab = function(newTab){ 
       $scope.tab = newTab; 

      HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) { 
           $scope.tabdata = data; 

      }); 
     }; 


     $scope.isSet = function(tabNum){ 
      return $scope.tab === tabNum; 

     };

整個看起來像這樣

angular.module('tabApp', []) 
    .controller('TabController', ['$scope', 'HttpService', function($scope, HttpService) { 
     $scope.tab = 1; 

     $scope.setTab = function(newTab){ 
       $scope.tab = newTab; 

      HttpService.CallService('http://localhost:8080/welcome.html?id='+newTab, function (data) { 
           $scope.tabdata = data; 

      }); 
     }; 


     $scope.isSet = function(tabNum){ 
      return $scope.tab === tabNum; 

     }; 
}]) 

.service('HttpService', ['$rootScope', '$http', function ($rootScope, $http) { 
     return { 
      CallService: function (url, callback) {     
       $http.get(url) 
        .success(function (data, status) {        
         callback(data, status); 
        }).error(function (data, status) { 
         callback(data, status); 
        });     
      } 
     } 
    });

來源

2017-10-11 14:31:03 stackg91

謝謝@ stackg91，你能告訴我如何結合我的第一部分代碼上面？ –

通常你會把服務放在一個不同的文件中，但對於例子恰好在控制器下 – stackg91

我嘗試了你提供的整個塊，它說錯誤 - > ReferenceError：HttpService沒有定義 –

MH也許get調用也許控制檯登錄狀態和響應

來源

2017-10-11 15:14:44 stackg91

控制檯日誌顯示正確的數據 - 任何問題與$ scope.tabdata = data; ？ –

好的。現在我得到了數據。謝謝。向HTML div添加了{{tabdata}} –

動態標籤更新引發的角度範圍問題

回答

相關問題