Angularjs에서 다중 카운터 관리

내 응용 프로그램 내에서 동일한 페이지에서 여러 카운터를 사용해야합니다. 카운터는 각각 0에서 100 %, 0에서 100 %로 계산됩니다.Angularjs에서 다중 카운터 관리

I는이 I가 해결하려고하고

$interval(function() { 
    if (data[counter] < 100) { 
     data[counter] = data[counter] + interval; 
    } else { 
     data[counter] = 0; 
    } 
}, 1000);

요구 코드 아래의 단순화 된 블록을 사용하여 수행하는 간격을 사용하고

은 :

가

페이지 카운터의 양이 변할 수있다 DB의 결과에 따라 달라질 수 있습니다.
이벤트에 따라 특정 카운터가 시작 또는 중지 될 수 있습니다.
카운터는 독립적으로 d 개 고유 한 계산 간격을 용이하게하기 위해 efined

카운트 시작을 기대할 때 실행될 수있는 독립적 인 코드 블록과 중지 명령을 실행할 수있는 블록을 만드는 것이 가장 좋은 방법이라고 생각합니다.

첫 번째 시도는 Angular 내에서 서비스를 만드는 것이 었습니다. 첫 번째 카운터에서는 훌륭한 기능을했지만 마지막 두 가지 요구 사항을 해결했습니다. 그러나 Angular 서비스는 싱글 톤으로 처리했기 때문에 페이지에 여러 독립 카운터를 허용하지 않았습니다.

제 질문은이 문제를 해결하는 가장 좋은 방법을 찾고 있습니다. API로 서비스를 만드는 권장 사항을 보았지만 지시어를 사용할 가능성도 있습니다. 누구에게 추천이 있습니까?

출처

2016-12-04 Tom Lebeda

이이 지침을 만들 수있는 완벽한 장소입니다. 매개 변수 개수가있는 counter라는 지시문을 만듭니다. – Toddsden

의견에 감사드립니다. 지시어를 작성한다면 별도의 카운터를 추적하기 위해 어떤 방법으로 생성 할 수 있습니까? –

아래 지시문을 사용하여 예제를 추가했습니다. – Toddsden

다음은 지침을 기반으로 한 답변입니다. 나는 실제 카운터를 GUI에서 분리했다. 따라서 원하는 GUI를 사용할 수 있습니다.

카운터 및 GUI 함께 다음과 같이 : 같은 변수를 사용하는 방법

<counter count="counter1Count" api="counter1Api"></counter> 
<counter-gui count="{{counter1Count}}" api="counter1Api"></counter-gui>

공지 사항들을 함께 연결합니다. 전체 예를 들어 코드를 체크 아웃 :

이

var app = angular.module('myApp',[]); 
 

 
    app.controller('MyCtrl', ['$scope', function($scope) { 
 
     $scope.counter1Api={}; 
 
    }]); 
 

 
    app.directive('counterGui',function(){ 
 
     return { 
 
      restrict: 'E', 
 
      template : '<h1>{{count}}</h1>' + 
 
      '<button ng-click="api.start()" class="btn btn-default" type="button">Start</button>' + 
 
      '<button ng-click="api.stop()" class="btn btn-default" type="button">Stop</button>' + 
 
      '<button ng-click="api.reset()" class="btn btn-default" type="button">Reset</button>', 
 
      scope: { 
 
       count : "@", 
 
       api : "=" 
 
      } 
 
     }; 
 
    }); 
 

 
    app.directive('counter',function(){ 
 
     return { 
 
      restrict: 'E', 
 
      controller: ['$scope','$interval', function myCounterController($scope,$interval) { 
 
       var intervalPromise= null; 
 
       reset(); 
 

 
       function reset() { 
 
        $scope.count= 0; 
 
        console.log("reset",$scope.count); 
 
       } 
 

 
       function start() { 
 
        // Make sure the timer isn't already running. 
 
        if (!intervalPromise){ 
 
         intervalPromise= $interval(function() { 
 
          if ($scope.count < 100) { 
 
           $scope.count++; 
 
          } else { 
 
           $scope.count = 0; 
 
          } 
 
         }, 1000); 
 
        } 
 
       } 
 

 
       function stop() { 
 
        if (intervalPromise) { 
 
         $interval.cancel(intervalPromise); 
 
         intervalPromise = null; 
 
        } 
 
       } 
 

 
       $scope.api={ 
 
        reset : reset, 
 
        start : start, 
 
        stop : stop 
 
       }; 
 

 
      }], 
 
      scope: { 
 
       count : "=", 
 
       api : "=" 
 
      } 
 
     }; 
 
    });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>AngularJS Counter Example</title> 
 

 
    <!-- AngularJS --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 

 
</head> 
 
<body ng-app="myApp"> 
 

 
<div ng-controller="MyCtrl"> 
 
    <h1>Counter 1</h1> 
 
    <counter count="counter1Count" api="counter1Api"></counter> 
 
    <counter-gui count="{{counter1Count}}" api="counter1Api"></counter-gui> 
 

 
    <h1>Counter 2</h1> 
 
    <counter count="counter2Count" api="counter2Api"></counter> 
 
    <counter-gui count="{{counter2Count}}" api="counter2Api"></counter-gui> 
 

 
    <h1>Counter 3</h1> 
 
    <p>Two GUIs displaying the same counter.</p> 
 
    <counter count="counter3Count" api="counter3Api"></counter> 
 
    <counter-gui count="{{counter3Count}}" api="counter3Api"></counter-gui> 
 
    <counter-gui count="{{counter3Count}}" api="counter3Api"></counter-gui> 
 
</div> 
 

 
</body> 
 
</html>

출처

2016-12-06 00:46:14 Toddsden

답변

관련 문제