홈>
각도 앱에 트위터 부트 스트랩 캐 러셀이 있습니다. data-slide 속성을 사용하면 다음과 같습니다.
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
그런 다음
href=#myCarousel
경로로 해석되고 현재 페이지가 다시로드됩니다. (HTML5 모드를 사용하고 있습니다)
다음으로 교체하여 회전식 메뉴를 작동시킬 수 있습니다 :
<a href="#" class="left carousel-control" ng-click="carouselPrev()">‹</a>
및 컨트롤러에서 :
$scope.carouselPrev = function(){
$('#myCarousel').carousel('prev');
};
그러나 이것을하는 올바른 방법은 무엇입니까?
- 답변 # 1
- 답변 # 2
데이터 대상에 따라 href가 변경되는 버그를 수정했습니다
<a data-slide="prev" data-target="#myCarousel" class="left carousel-control">‹</a>
- 답변 # 3
내 문제를 해결하기 위해 올바른 과정을 밟으면 다음은 내 지시문과 HTML입니다.
angular.module('portal.directives', []) .directive('bootCarousel', function(){ return function(scope, elem, attrs) { scope.carouselPrev = function(){ $('#'+attrs.id).carousel('prev'); } scope.carouselNext = function(){ $('#'+attrs.id).carousel('next'); } } });
단어 :
<div id="carousel-generic" class="carousel slide" data-slide="cycle" boot-carousel> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-generic" data-slide-to="{{$index}}" ng-class="{'active': $index == 0, '': $index != 0}" ng-repeat="banner in banners"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div ng-class="{'item active': $index == 0, 'item': $index != 0}" style="height: 340px; background: #c33" ng-repeat="banner in banners"> <div ng-bind-html-unsafe="banner.sContent"></div> <div class="carousel-caption"> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" ng-click="carouselPrev()" href="" data-slide="prev"> <img src="images/Portal_header_arrowL.png" alt="Previous"> </a> <a class="right carousel-control" ng-click="carouselNext()" href="" data-slide="next"> <img src="images/Portal_header_arrowR.png" alt="Next"> </a>
- 답변 # 4
아니요, 올바른 방법이 아닙니다. 컨트롤러 내부에서 DOM을 수정하지 마십시오. 이에 대한 예외는 없습니다. 그냥 나쁜 연습이야.
당신이하고 싶은 것은
directives
를 사용하는 것입니다 .시작하는 데 도움이되는 링크는 다음과 같습니다. http://docs.angularjs.org/guide/directive
관련 자료
- jquery - Javascript가 작동하지 않는 여러 Bootstrap Select div 추가
- JavaScript를 통해 HTML 부트 스트랩 DataTable에서 firestore 데이터를 정렬하는 방법은 무엇입니까?
- html - 부트 스트랩 및 JavaScript 버튼 배경색으로 아이콘 변경
- html - 토스트 기능에 부트 스트랩 및 자바 스크립트 사용
- json - 자바 스크립트에서 단일 ajax 호출로 더 많은 AngularJS 컨트롤러에 데이터를 삽입하는 방법
- reactive programming - 내 React Native 앱 내에서 JQuery 및 BootStrap과 같은 JavaScript 라이브러리를 사용할 수 있습니까
- Javascript + AngularJ를 사용하는 함수의 문제
관련 질문
- javascript : 사용자 지정 지시문에 HTML 전달
- javascript : 부트스트랩 4: Scrollspy 탐색에서 단일 링크 오프셋
- JavaScript를 사용하여 버튼 클릭 시 배열 값을 지우시겠습니까?
- javascript : 부트스트랩 5 아코디언이 닫힌 경우 필수 양식 필드 무시
- javascript : 새로 고침이 아닌 브라우저 탭을 닫을 때 로컬 저장소를 지워야 합니다.
- javascript : 단일 페이지의 html 카드에 있는 여러 필드
- javascript : 사용자가 angularjs를 사용하여 입력 상자에 양수만 입력할 수 있도록 허용
- javascript : 복잡한 프로젝트를 Angular 1.5에서 2로 마이그레이션하는 방법은 무엇입니까?
- JavaScript, 클라이언트에서 서버로 이벤트
- javascript : 명령 프롬프트에서 Angular js 프로젝트 시작
아니면 이것을 사용하십시오 : Angular-UI-부트 스트랩 (캐 러셀 지시문 포함)