javascript - Angular 的无限摘要问题

Question

所以我尝试使用 Controller 内的一些逻辑向 ng-repeat 添加属性。我收到 infdig 错误。我很确定我收到了错误，因为我试图在 ng-repeat 期间更改范围值，但我不确定有什么方法可以解决我想要做的事情而不抛出错误。

所以我通过 ng-repeat 启动 Impress。最后应该是这样的:

<div rotate="45">
<div rotate="90"
<div rotate="135">
<div rotate="180"
<div rotate="135">
<div rotate="90">
<div rotate="45">
<div rotate="0">

那么我怎样才能完成这个任务而不收到错误消息呢？

这是我的整个 Controller :

var ATCExpo = angular.module('ATCExpo', [])
    .directive('initiateImpress', function($timeout, $rootScope) {
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                if (scope.$last === true) {
                    $timeout(function() {
                        scope.$emit('ngRepeatFinished');
                    });
                }
            }
        };
    });

ATCExpo.controller('atcExpoCtrl', function($scope, $timeout, $route, $rootScope, $location, $window, dsDemos) {
    $scope.rendered = {};
    $scope.show = "all";
    $scope.downloaded = 0;
    $scope.counter = 0;
    $scope.size = 100;

    //This function is used to track and update the rotation angle for the Impress.
    $scope.rotate123 = 180;
    $scope.rotateUp123 = false;
    $scope.getRotate = function(number) {
        if ($scope.rotate123 == 0 || $scope.rotate123 == 180) {
            $scope.rotateUp123 = !$scope.rotateUp123;
        }
        if ($scope.rotateUp123) {
            $scope.rotate123 = $scope.rotate123 + 45;
        } else {
            $scope.rotate123 = $scope.rotate123 - 45;
        }
        return $scope.rotate123;
    };

    //count how many times this controller has been loaded.This is to create a new array object inside the impress.js framework for re - rendering.
    if (!angular.isDefined($rootScope.loadCount)) {
        $rootScope.loadCount = 0;
    } else {
        $rootScope.loadCount++;
    }
    $scope.spinnerHide = false;

    //Event Listener for ng-repeat on Demo impress cards.
    $scope.$on('ngRepeatFinished', function() {
        if ($rootScope.loadCount > 0) {
            //remove HTML for old div. I don't believe it actually exists, but just in case I added this.
            $j('#impress' + ($rootScope.loadCount - 1)).empty();
        }
        if (!angular.isDefined($scope.allRendered)) {
            $scope.allRendered = true;
            $scope.rendered.all = "rendered";
            // render new impress.
            impress().init();
        }
    });

    //get demos service call, but only call it if we need it.
    if (!angular.isDefined($scope.demos)) {
        dsDemos.getDemos();
    }
    //Event Listener for Demos
    $scope.$on('GetDemosPlus', function(event, demosPlus) {
        $timeout(function() {
            $scope.demos = demosPlus.demos;
            // sometimes that scope needs a kick
            if (!$scope.$$phase) $scope.$apply();
        }, 0);
    });
});

整个 HTML:

<div id="impressContainer" class="pull-right" ng-style="middleStyle">
        <div id="impress">
            <div ng-repeat="demo in demos" data-x="{{(($index + 1) * 1000) + 5000}}" data-y="{{(($index + 1) * -1500) - 3000}}" data-z="{{(($index + 1) * 2000) + 80000}}" data-rotate="{{getRotate()}}" data-scale="3" initiate-impress=""
            class="step top stepCSS">
                <h1>{{demo.name}}</h1>
                    <img src="{{demo.logo}}" />
            </div>
        </div>
</div> 

Answer 1

我不确定这是否是您想要的

http://plnkr.co/edit/vZC06L0gF0yarG7jwIcr?p=preview

如果有什么问题请告诉我。

<div ng-view="">
<!-- ngRepeat: rotate in rotations --><div ng-repeat="rotate in rotations" data-rotate="0" class="ng-scope ng-binding">
  inside rotate 0

</div><div ng-repeat="rotate in rotations" data-rotate="45" class="ng-scope ng-binding">
  inside rotate 45

</div><div ng-repeat="rotate in rotations" data-rotate="90" class="ng-scope ng-binding">
  inside rotate 90

</div><div ng-repeat="rotate in rotations" data-rotate="135" class="ng-scope ng-binding">
  inside rotate 135

</div><div ng-repeat="rotate in rotations" data-rotate="180" class="ng-scope ng-binding">
  inside rotate 180

</div><div ng-repeat="rotate in rotations" data-rotate="135" class="ng-scope ng-binding">
  inside rotate 135

</div><div ng-repeat="rotate in rotations" data-rotate="90" class="ng-scope ng-binding">
  inside rotate 90

</div><div ng-repeat="rotate in rotations" data-rotate="45" class="ng-scope ng-binding">
  inside rotate 45

</div><div ng-repeat="rotate in rotations" data-rotate="0" class="ng-scope ng-binding">
  inside rotate 0

</div><div ng-repeat="rotate in rotations" data-rotate="0" class="ng-scope ng-binding">
  inside rotate 0

</div></div>