jQuery UI 및 AngularJS UI 라우터에 대한 질문이 있습니다. 내 응용 프로그램에서 jQuery UI 테마를 사용하고 싶습니다만, AngularJS UI 라우터를 사용하면 DOM 트리이 완료되지 않았습니다.jQuery UI 및 AngularJS UI 라우터의
어떻게 AngularJS UI 라우터의 템플릿에 jQuery UI 요소를 추가 할 수 있습니까?
내 영어 죄송합니다.
MonkeyVoodoo는 지적한대로 Twitter Bootstrap을 Angular와 함께 사용하는 프로젝트가 있습니다. 그것은 잘 관리되고 작업은 이미 완료되었습니다.
jQuery UI를 사용해야하는 경우 직접 지시문을 작성하고 직접 관리해야합니다. 각각은 어렵지 않지만 jQuery UI에는 많은 옵션이있는 위젯이 많이 있습니다.
경로를 변경할 때 DOM을 대체하는 방법은 지시문이 필요한 이유입니다. DOM을 서버에서 직접 캐싱 된 것으로 바꿉니다. 라우트를 마지막으로 볼 때 제거 된 버전이 렌더링되지 않았습니다. 즉, 경로가 변경 될 때마다 jQuery UI 위젯을 초기화하기 위해 jQuery UI 함수를 실행해야합니다.
지시어는 새로운 DOM을 컴파일 할 때마다 자동으로 실행되므로 여기에 표시됩니다. "jQuery UI-ify"에 원하는 요소를 찾기 위해 지시문을 설정할 수 있습니다. 당신이 이것들을 변경하는 경우
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
:
<div jq-ui-buttonset>
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
이 같은 .buttonset() 기능을 적용 할 지침 작성 :
myApp.directive('jqUiButtonset',function(){
return {
restrict: "A",
link: function(elm){
$(elm[0]).buttonset();
}
}
});
이것은 작동하며 매우 기본적인 예입니다. 특정 구성을 .buttonset() 호출에 전달할 수 있도록 확장해야합니다. 보시다시피, 이것은 .buttonset()에 대해서만 작동합니다. 당신은 사용하고자하는 각각의 것을 위해 하나를 만들어야 만 할 것이고, jQuery UI는 당신이 사용할 수있는 많은 것들을 가지고있다.
jQuery UI로 수행 할 수있는 대부분의 작업을 수행하는 Angular JS 지시문이 이미 많이 있습니다. 예를 들어 각도 Ui 부트 스트랩 : http://angular-ui.github.io/bootstrap/
이것은 내 코드입니다. 그것은 내 프로젝트에서 작동합니다.
.directive('jqUiButtonset',function() {
return function(scope, element, attrs) {
$(element).buttonset();
}
})
하지만 jQuery UI의 요소가 필요합니다. – Niezborala