2013-07-12 2 views
0

각도와 파손 사이의 간섭으로 인해 문제가 발생합니다.각도 검사가 기초 간섭을 받음

기본적으로, 난 그냥 the example provided in the doc 붙여 복사 :

Check me to check both: <input type="checkbox" ng-model="master"><br/> 
<input id="checkSlave" type="checkbox" ng-checked="master"> 

2 예 : 나는 $(document).foundation();

  • 이 : 좋은 디자인을 내가 $(document).foundation();을 언급 할 때, 예

  • 작동하지 않습니다 : 더 이상 기초 선 (善) 없음, 예시가있다.

재단에 의해 추가 된 마크 업 때문일 수도 있지만 여전히 도움이되지 않습니다.

나는 둘 다 얻을 수있는 방법을 찾고 있습니다. 여러분 중 누구도이 문제를 겪었습니까?

답변

1

Angular가 DOM을 생성 할 때까지 DOM 요소가 실제로 존재하지 않기 때문에 Angular-driven DOM에서 .foundation()과 같은 라이브러리 이니셜 라이저를 호출 할 수 없습니다.

이것은 모든 클라이언트 측 MVC 프레임 워크에서 중요한 속도 향상이지만이 유형의 기능을 구현하기 만하면되는 것은 아닙니다.

각도를 사용하여 Foundation을 사용하는 적절한 방법은 위젯을 Directives으로 묶는 것입니다. 여기

당신에게 도움이되는 몇 가지 리소스입니다 :

+0

에서 등 기초 구현

지침 조각에 대해 너무 많이 알고로는 문제를 해결할 것이다 . 나는 파운데이션에게 혼자 남겨 두라고 말해야한다. – apneadiving

0

ng-checked를 사용하는 대신 사용자 정의 지시어를 만들 수 있습니다. 그러면 ng-checked가 재단의 추가 마크 업을 처리합니다. 그것은 유휴 방법이되지 않을 수도 있습니다,하지만 난 그냥 체크 박스를 디자인 어떤 식 으로든를 유지할 필요가 original blog post

directive('ngCheckedFoundation',['$timeout', function($timeout) { 
    function markCheckBox(value, scope, element, attr) { 
     //timeout to avoid the foundation javascript action changed by this directive 
     $timeout(function() { 
       if(value) { 
        attr.$set("checked", true); 
        element.next().addClass('checked'); 
       } 
       else { 
        attr.$set("checked", false); 
        element.next().removeClass('checked'); 
       } 
     }, 200); 
    } 

    function link (scope, element, attr, ctrl) { 
     scope.$watch(attr["ngCheckedFoundation"], function(n,o) { 
      if(n != o) { 
      markCheckBox(n, scope, element, attr); 
      } 
     }); 
     markCheckBox(scope.$eval(attr.ngCheckedFoundation), scope, element, attr); 
    } 

    return({ 
     link: link, 
     restrict: "A", 
    }); 
}])