Прокручиваемые виды при использовании известных углов

Question

Я супер новый, известный и промежуточный по угловой.

Вопрос: Поскольку все фиксированное позиционирование в знаменитом, как я должен подойти к созданию прокручиваемой секции с использованием известного углового?

HTML: это создаст сетку квадратов этот код взят из Famous/angular tut

<fa-app id="app"> 
    <fa-grid-layout fa-options="myGridLayoutOptions"> 
    <fa-modifier ng-repeat="item in list" 
       fa-size="[100, 100]" 
       fa-origin="[0.5, 0.5]" 
       fa-align="[0.5, 0.5]" 
       fa-rotate-z="item.rotate.get()"> 
     <fa-surface fa-background-color="item.bgColor"> 
     {{item.content}} 
     </fa-surface> 
    </fa-modifier> 
    </fa-grid-layout> 
</fa-app> 

CSS: позиции окна приложения

#app { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

CTRL: делает 3x3 сетку и перебирает элементы списка

var Engine = $famous[('famous/core/Engine')]; 
    var Surface = $famous[('famous/core/Surface')]; 
    var Transitionable = $famous['famous/transitions/Transitionable']; 
    var Easing = $famous['famous/transitions/Easing']; 
    $scope.myGridLayoutOptions = { 
     dimensions: [3, 3] 
    }; 

    $scope.list = [ 
     {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)}, 
     {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)}, 
     {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)}, 
     {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)}, 
     {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)}, 
     {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)}, 
     {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)}, 
     {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)}, 
     {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)}, 
     {content:"hello", bgColor: "#b58900", rotate: new Transitionable(0)}, 
     {content:"world", bgColor: "#cb4b16", rotate: new Transitionable(0)}, 
     {content: "famous", bgColor: "#dc322f", rotate: new Transitionable(0)}, 
     {content: "angular", bgColor: "#d33682", rotate: new Transitionable(0)}, 
     {content: "is", bgColor: "#6c71c4", rotate: new Transitionable(0)}, 
     {content: "cool!", bgColor: "#268bd2", rotate: new Transitionable(0)}, 
     {content: "asd", bgColor: "#d33682", rotate: new Transitionable(0)}, 
     {content: "ass", bgColor: "#6c71c4", rotate: new Transitionable(0)}, 
     {content: "fffs!", bgColor: "#268bd2", rotate: new Transitionable(0)} 
    ]; 

    $scope.animate = function() { 
     for (var i = 0; i < $scope.list.length; i++) { 
     $scope.list[i].rotate.set(Math.PI * 4, {curve: Easing.inOutElastic, duration: 3000 * i}) 
     }; 
    }; 

    $scope.animate(); 

Answer 1

ИТАК после просмотра демок famo.us Угловая я натыкался на примере, что правильно прокручивается. Documentation

Как думать о прокрутке отличается от famo.us чем типичный html. Для того, что я думаю, это несколько причин [управление памятью, цикл двигателя и т. Д.], Есть директива, называемая fa-scroll-view, которая создаст событие прокрутки. Задача на этом не заканчивается. нужно добавить это событие к элементу с использованием труб.

<fa-app ng-controller="PipeCtrl"> 
    <!-- fa-scroll-view receives all events from $scope.myEventHandler, and decides how to handle them --> 
    <fa-scroll-view fa-pipe-from="myEventHandler"> 
     <fa-view ng-repeat="view in views"> 
     <fa-modifier fa-size="[undefined, 160]"> 
     <!-- All events on fa-surfaces (click, mousewheel) are piped to $scope.myEventHandler --> 
      <fa-surface fa-background-color="view.color" 
         fa-pipe-to="myEventHandler"> 
      </fa-surface> 
      </fa-modifier> 
     </fa-view> 
    </fa-scroll-view> 
</fa-app> 

<script> 
    angular.module('faPipeExampleApp', ['famous.angular']) 
     .controller('PipeCtrl', ['$scope', '$famous', function($scope, $famous) { 

     var EventHandler = $famous['famous/core/EventHandler']; 

     $scope.views = [{color: 'red'}, {color: 'blue'}, {color: 'green'}, {color: 'yellow'}, {color: 'orange'}]; 

     $scope.myEventHandler = new EventHandler(); 

    }]); 
</script>