AngularJS - 鉤入Angular UI Bootstrap - Carousel自定義Next（）？

Question

我試圖實現一個Angular UI Bootstrap旋轉木馬，但我用它來進行測驗。因此，我不需要普通的Prev（）和Next（）按鈕。

相反，我需要一個自定義的Next（）按鈕，確保他們在繼續下一個問題/答案的「幻燈片」之前選擇了答案。

如何鉤入carousel指令函數來運行我的代碼，然後使用carousel.next（）函數？

感謝， 斯科特

Answer 1

沒有官方可能實現這一目標。但是如果你願意，這可以被黑客入侵。但我認爲最好抓住Bootstrap原始的一個，看看在角度bootstrap UI源（carousel），並編寫自己的包裝。

這裏談到的黑客：

我們要解決的第一個問題是，如何訪問CarouselController。沒有公開此API的指令，carousel指令創建了一個隔離範圍。爲了訪問這個範圍，需要在指令被angular實例化之後，代表輪播的元素。爲了實現這一目標，我們可能會使用類似這樣的指令，必須在相同的元素放在爲我們的NG-控制器：

app.directive('carouselControllerProvider', function($timeout){ 
    return { 
    link:function(scope, elem, attr){ 
     $timeout(function(){ 
     var carousel = elem.find('div')[1]; 
     var carouselCtrl = angular.element(carousel).isolateScope(); 

     var origNext = carouselCtrl.next; 
     carouselCtrl.next = function(){ 
      if(elem.scope().interceptNext()){ 
       origNext(); 
      } 
     }; 

     }); 
    } 
    }; 
}); 

我們必須包裝在$timeout調用我們的代碼要等到角度創造了孤立（這是我們的第一次黑客 - 如果我們不想這樣做，我們必須將我們的指令放在輪播之下，但這是不可能的，因爲內容將被替換）。下一步是在更換後找到傳送帶的元素。通過使用功能isolateScope，我們可以訪問隔離的範圍 - 例如到CarouselController。

下一個黑客是，我們必須用我們的實現替換原來的CarouselController的下一個函數。但稍後要調用原始函數，我們必須保留此函數供以後使用。現在我們可以替換next函數。在這種情況下，我們稱之爲我們自己的控制器的功能interceptNext。我們可以通過代表控制器的元素範圍來訪問這個函數。如果interceptNext返回true我們調用傳送帶原來的下一個功能。當然，您可以將完整的原始下一個功能展示給我們的控制器 - 但出於演示目的，這就足夠了。而我們定義interceptNext功能是這樣的：

$scope.intercept = false; 
$scope.interceptNext = function(){ 
    console.log('intercept next'); 
    return !$scope.intercept; 
} 

現在，我們可以通過複選框控制轉盤的next功能，綁定到$scope.intercept。 A PLUNKR演示了這一點。

我知道這不完全是你想要的，但你如何做到這一點就證明了。

Answer 2

這個破解是整潔的邁克爾，我開始研究類似的東西來滿足我的需求。但後來意識到我最終可能會傾盡全力爲開源社區貢獻力量。

我剛剛提交了一個pull請求來更新庫，以便當前幻燈片的索引暴露給Carousel範圍。

https://github.com/angular-ui/bootstrap/pull/2089

這種變化可以讓你有在傳送帶模板每個幻燈片行爲。

這種變化讓我重寫基轉盤模板，以便例如在第一張幻燈片的「上一頁」按鈕不會顯示或「下一步」按鈕，將顯示的不是最後一張幻燈片。

您可以添加更復雜的邏輯爲自己的個人需求，但以這種方式在當前指數暴露在$範圍使框架更加靈活，這部分的一部分。

編輯

我做我私人使用更多的變化，但不希望相當，但有助於這種變化更接近你需要什麼。

我修改了輪播指令，將「完成」屬性添加到範圍。

.directive('carousel', [function() { 
    return { 
     restrict: 'EA', 
     transclude: true, 
     replace: true, 
     controller: 'CarouselController', 
     require: 'carousel', 
     templateUrl: 'template/carousel/carousel.html', 
     scope: { 
      interval: '=', 
      noTransition: '=', 
      noPause: '=', 
      finish: '=' 
     } 
    }; 
}]) 

然後，當我聲明轉盤，我可以在該指令屬性，是在包含轉盤控制器的範圍的方法的方法通過。

<carousel interval="-1" finish="onFinish"> 
    ... 
</carousel> 

這讓我修改我的模板有一個按鈕，看起來像這樣：

<button ng-hide="slides().length-1 != currentIndex" ng-click="finish()" class="btn next-btn">finish<span class="glyphicon glyphicon-stats"></span></button> 

所以這隻能說明有條件在正確的幻燈片，並與NG單擊它呼籲傳送帶的$ scope.finish（）這是一個指向我爲此應用程序創建的控制器中的方法的指針。

有意義嗎？

編輯：這隻適用於如果你不使用ng-repeat的排序功能。有一個錯誤會打破這些功能的幻燈片的索引。