AngularJS

Partials Transiton

by Bretto

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc6.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

<div ng-app="myApp">
    
  <ng-view></ng-view>
     
          <ul class="pager">
            <li class="previous">
              <a href="#">&larr; Back</a>
            </li>
            <li class="current">
              <a>|{{currentSlideId}}|</a>
            </li>
            <li class="next">
              <a href="#">Next &rarr;</a>
            </li>
          </ul>
        
    
  <hr />
    
  <div ng-controller="AppCtrl" id="AppCtrl">  
  <li ng-repeat="slide in slides">
      <a href="#/slides/{{slide.id}}" ng-click="setCurrentSlideId()"><span>{{slide.id}}: {{slide.title}}</span></a>
    </li>
  </div>
    
    
  <script type="text/ng-template" id="slide-view.html">
      <div class="hero-unit">
        <div ng-include src="currentSlidePath"></div> 
      </div>
  </script> 
    
    <script type="text/ng-template" id="slide1.html">
        <p>This is the partial for view 1.</p>   
     </script>
    
  <script type="text/ng-template" id="slide2.html">
     
        <p>This is the partial for view 2.</p>
         
     
  </script>
  <script type="text/ng-template" id="slide3.html">
     
        <p>This is the partial for view 3.</p>
         
     
  </script>
</div>

JavaScript

function AppCtrl($scope, $routeParams, $rootScope) {
    $scope.slides = [
        {
        "title": "Slide 1",
        "id": "1"},
    {
        "title": "Slide 2",
        "id": "2"},
    {
        "title": "Slide 3",
        "id": "3"}
    ];
    
    
    $scope.setCurrentSlideId = function() {
        $rootScope.currentSlideId = this.slide.id;
        $scope.currentSlidePath = 'slide' + this.slide.id + '.html';
        console.log($scope.currentSlidePath);
    };
    
}


function MyCtrl($scope, $routeParams) {
    $scope.currentSlidePath = 'slide' + $routeParams.slideId + '.html';
    //console.log(angular.element("#AppCtrl").scope().currentSlidePath);
    //$scope.currentSlidePath = angular.element("#AppCtrl").scope().currentSlidePath;
   
}

angular.module('myApp', []).config(function($routeProvider) {
    $routeProvider.when('/slides/:slideId', {
        template: 'slide-view.html',
        controller: MyCtrl
    });
});