스피너 표시 및 숨기기

2. 2D 캔버스에서 눈금 레이아웃 위젯을 캔버스로 끌어 놓습니다.

4. 세부 정보 창의 눈금 작업 아래에서 열 추가를 두 번 클릭합니다.

5. 다음 위젯을 눈금 레이아웃 열로 끌어서 놓습니다.

열	위젯	속성
1	버튼	텍스트 필드에 Start를 입력합니다.
2	버튼	텍스트 필드에 Cancel를 입력합니다.
3	스피너	표시 확인란을 선택 취소합니다.

본 자습서에서는 버튼 색상에 기본 제공되는 스타일을 적용했습니다. 자세한 내용은 테마 항목을 참조하십시오.

6. 이번에는 새 응용 프로그램 매개변수를 만들어 스피너 위젯의 속성에 바인딩합니다. 데이터 창에서 응용 프로그램 매개 변수 옆의 녹색 + 아이콘을 클릭합니다.

7. 응용 프로그램 매개 변수 추가 창의 이름 필드에 spinnerVisible를 입력하고 추가를 클릭합니다.

8. spinnerVisible 옆의

바인딩 아이콘을 프로젝트 창의 spinner-1에 끌어 놓아 spinnerVisible 응용 프로그램 매개변수를 스피너에 바인딩합니다.

바인딩 대상 선택 창에서 Y 표시를 선택합니다.

9. 프로젝트 창에서 Home.js를 클릭합니다. JavaScript 편집기에 다음을 입력합니다.

$scope.hideSpinner = function() {
$scope.app.params.spinnerVisible = false;
};
$scope.start = function() {
$scope.app.params.spinnerVisible = true;
$scope.timeoutPromise = $timeout($scope.hideSpinner, 3000);
};
$scope.cancel = function() {
$timeout.cancel($scope.timeoutPromise);
};

10. 프로젝트 창의 홈을 클릭하여 캔버스로 돌아갑니다.

11. 시작 버튼을 선택하여 속성을 확인합니다.

12. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 start();를 표현식 상자에 입력합니다.

이 버튼을 클릭하면 start JavaScript 함수가 실행됩니다.

13. 취소 버튼을 선택하여 속성을 확인합니다.

14. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 cancel();를 표현식 상자에 입력합니다.

이 버튼을 클릭하면 cancel JavaScript 함수가 실행됩니다.

15. 미리 보기를 클릭합니다. 이제 “시작” 버튼을 클릭하여 스피너를 호출할 수 있습니다.