2014-02-25 5 views
1

그래서 내 컨트롤러 내부의 일부 로직을 사용하여 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> 
+0

당신의 반복을 몰고가는 것과 같이 당신의 반복을 몰고가는 것과 같이 조금 더 많은 코드를 공유 할 필요가 있습니다. 다른 곳에서 회전한다면 무한 다이제스트는 다이제스트주기 동안 바운드 프로퍼티의 값을 수정한다는 것을 의미합니다. 봤어요. –

+0

ng-switch를 살펴 보셨습니까? –

+0

전체 컨트롤러를 추가했습니다. – user3353597

답변

0

나는 확실하지 않다 당신은

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> 
0

나는이 같은 지침 내에서 전역 변수를 사용하지 결국 : 당신의 도움에 대한 모든

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) 
     } 
    }; 
}) 

감사합니다!