AngularJS + JQuery Isotope + 동적 콘텐츠 만들기가 잘되다.

내 페이지에서 AngularJS의 html 템플릿은 컨트롤러의 변수에 평소대로 바인딩됩니다. 새 항목을받을 때 WebSockets &을 사용하고 있습니다. 스코프의 값을 업데이트하고 angle의 $ apply를 호출합니다. 이것은 잘 작동합니다. AngularJS는 새 항목이 추가/삭제 된 렌더링 뷰를 올바르게 업데이트합니다 ...AngularJS + JQuery Isotope + 동적 콘텐츠 만들기가 잘되다.

까다로운 부분은 Isotope 플러그인을 가져옵니다. 내용이 동위 원소의 동적 추가 항목이기 때문에 은 (http://isotope.metafizzy.co/docs/adding-items.html)는 몇 가지 이유에 대해 간단하지 않다 : 컨트롤러의 데이터를 업데이트하고 각 적용 호출에

는 필요한 추가 요소를 작성합니다.
Isotope는 추가하려는 각 항목을 알아야합니다.
AngularJS가 컨트롤러에 html 항목이 무엇인지 알려주는 방법이 없다고 생각합니다.

3 명이 함께 작업 한 사람이 있습니까? HTML을 생성하여 Isotope로 전달할 수있는 방법이 있습니까?

출처

2013-01-13 zcourts

jQuery를 동위 원소 및 AngularJS와 함께 좋은 플레이 갖는 것은 항상 간단하지 않다, 나는 동위 원소에 기본 AngularJS와 대안을 구현 (진행중인 작업) : http://tristanguigue.github.io/angular-dynamic-layout/ 이 경우 지시자가 컨트롤러에서 제공 한 항목의 변경 사항에 대한 레이아웃을 트리거 한 이후에 항목이 삽입되었는지 여부를 알기 위해 항목을보아야하는 것에 대해 걱정할 필요가 없습니다. – Tristan

ng-repeat를 사용하여 view/HTML을 생성한다고 가정합니다.

다음은 시도해 볼 수있는 것입니다. 지시문을 작성하고 ng 반복이있는 동일한 요소에 첨부하십시오. 마지막으로 (또는 다른 지시문 뒤에) 실행되도록 지시문 priority을 설정하십시오. 지시문의 링크 함수가 웹 소켓 정보의 결과로 업데이트 한 $ $ scope 속성을 보게합니다. (또는 뭔가 변경 될 때마다 증가하는 범위의 카운터를 만들 수 있다고 가정합니다. 지침). 지시문/시계에서 변경 사항을 감지하면 link 함수의 element 속성을 통해 새 HTML을 추출하고 isotope로 보냅니다.

컨트롤러에서 추가/제거 된 항목을 결정하기 위해 감시 콜백에서 액세스 할 수있는 범위 속성을 설정해야 할 수도 있습니다.

link: function(scope, element, attrs, someController) { 
    scope.$watch(..., function(newValue) { 
     // extract HTML with Angular or jQuery 
     var children = element.children(); 
     for(i=scope.first_new_item; i<= scope.last_new_item; i++) { 
      $('#isotope_container').isotope('insert'), children[i]); 
     } 
     // handle removed items similarly ?? 
    }

contents()가 children()보다 잘 작동하거나 jQuery 선택기를 사용할 수 있습니다.

출처

2013-01-13 04:22:44

좋은 생각입니다. 감사. Angular에서 링크 단계를 사용하지 않았지만 시도하기에 좋은 시간이었습니다. jQuery 선택기를 사용하고 몇 가지 변형을 사용하여 아이디어가 올바르게 적용된 사용 사례에 맞 춥니 다! :디 – zcourts

이 경로를 따라 가면서 문제를 발견하게되어 기쁘게 생각합니다. Mark의 해결책이 바로 있습니다.

imagesLoaded 동위 원소 요소의 높이가 동적이며 이미지에 따라 다르면 라이브러리가 유용합니다.

출처

2013-08-04 20:47:50

AngularJS + JQuery Isotope + 동적 콘텐츠 만들기가 잘되다.

답변

관련 문제