Question

所以我试图使用控制器内部的逻辑向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">

那么如何在不收到错误消息的情况下完成此任务呢？

这是我的整个控制器：

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>

Answer 2

我最终不得不在这样的指令中使用全局变量：

var expoRotate = 180;
var expoRotateUp = false;
var ATCExpo = angular.module('ATCExpo', [])

Module.directive('getRotate', function($window) {
    return {
        restrict: 'A',
        link: function(scope, element, window) {
            if ($window.expoRotate == 0 || $window.expoRotate == 180) {
                $window.expoRotateUp = !$window.expoRotateUp
            }
            if ($window.expoRoateUp) {
                $window.expoRotate += 45;
            } else {
                $window.expoRotate -= 45;
            }
            element.attr('data-rotate', $window.expoRotate)
        }
    };
})

感谢大家的帮助！

Angular的无限摘要问题

2 个答案: