使用AngularJS在引導標籤

重新加載數據我有我的角度頁面上有兩個標籤引導程序如下：使用AngularJS在引導標籤

<div> 
    <ul class="nav nav-tabs"> 
     <li class="active strong"> 
      <a data-target="#home" data-toggle="tab">Tab 1</a> 
     </li> 
     <li class="strong"> 
      <a data-target="#pairs" data-toggle="tab">Tab 2</a> 
     </li> 
    </ul> 
    <div id="myTabContent" class="tab-content"> 
     <div class="tab-pane fade in active" id="home"> 
      <div ng-include="partial_1.html"></div> 
     </div> 
     <div class="tab-pane fade" id="pairs"> 
      <div ng-include="partial_2.html"></div> 
     </div> 
    </div> 
</div>

諧音的兩人都在partial_X.html定義自己的控制器。這兩個選項卡有自己的數據和業務邏輯，但如果用戶在第二個選項卡上更改服務器上的數據，則應從服務器重新加載第一個選項卡的內容（或至少在用戶轉到第一個選項卡時）。

當單擊該選項卡時，當然不會發生重裝，因爲控制器已被實例化。只有在控制器再次初始化時，頁面上的瀏覽器刷新後纔會重新加載數據。

單擊Tab 1時有沒有辦法重新加載控制器？我也可以將兩個子控制器合併爲一個，但對於我的問題，這聽起來像是一個骯髒的解決方法。

來源

2013-10-29 Janne

讓控制器更改數據廣播事件和需要更新的控制器監聽該事件。本次活動將有上$rootScope待廣播：

控制器，改變數據：

changeData().then(function() { 
    $rootScope.$broadcast("importandDataChanged"); 
});

控制器需要更新：

$scope.$on("importandDataChanged", function() { 
    // signal that data changed, lazy load when the tab is actually clicked 
    $scope.importantData = null; 
}); 

// let $scope.active be a flag that is true when the tab is active 
$scope.$watch("active", function(newvval) { 
    if(newval && $scope.importantData === null) { 
     loadData(); 
    } 
});

活躍標記的實現依賴於您使用的工具包（使用Bootstrap，我建議使用Angular UI Bootstrap）。

來源

2013-10-29 06:49:44

謝謝，所有的答案都很棒。 :)我想我會像上面那樣去做。 – Janne

你可以編寫一個指令來監聽引導jquery插件的事件（請參閱docs），或者使用像你這樣的集成庫，如angular-strap。然後，只需注意事件（或更改模型）並使用服務器中的數據更新您的範圍。

來源

2013-10-29 06:39:42

不要在重新加載控制器的方面考慮它，而應考慮簡單地刷新控制器範圍內的數據。一個控制器可以通過多種方式與另一個控制器進行通信（即廣播/發射事件，使用共享服務或改變通用範圍）。無論何時控制器需要爲另一個控制器刷新數據，只需使用其中一種可用方法通知其他控制器執行ajax請求並在其作用域上設置新值。

來源

2013-10-29 06:46:45 dtabuenc

使用AngularJS在引導標籤

回答

相關問題