동적으로 생성 된 html을 범위 모델에 바인딩

뭔가 붙어 있습니다 ....동적으로 생성 된 html을 범위 모델에 바인딩

콘텐츠를 지정해야하는 popover 요소가 있습니다.
내용은 HTML을 나타내는 문자열 또는 이 HTML을 생성하는 함수가 될 수 있습니다.
popover의 HTML은 지시어 범위의 일부인 배열의 객체를 나타내는 체크 박스 목록이어야합니다. 팝업을 표시 할 때마다 HTML이 요청됩니다.
해당 확인란을 클릭하면 배열에있는 개체의 상태가 변경됩니다. 내가 갇혀있는 것은 새로 생성 된 HTML을 범위의 모델과 일관되게 바인딩 할 수 있다는 것입니다.
나는 그것이 처음에는 작동하지만 다음 번에는 작동하지 않거나 시작하려면 이상한 HTML을 생성 할 수 있다는 것을 의미합니다. 내가하려고했고, 무슨 짓을

일 :

(A) 그냥 분명히 작동하는 페이지에서이 퍼팅 (이 를 올바르게 표시됩니다 의미와 객체의 상태를 변경 않습니다 확인란을 클릭)

<form id="{{id}}"> 
    <label class="checkbox" ng-repeat="field in metadata.fields"> 
      <input type="checkbox" ng-model="field.displayByDefault"> {{field.text}} 
    </label> 
</form>

(b)의 jQuery 개체로 폼 요소를 잡아 ($ ('# FormId')) 및 공급는 DOM에서 제거 이후 팝 오버 옵션로의 콘텐츠가 실제로 작동 만 처음으로 그 처음 사용할 때

제안 사항이 도움이됩니다.

==== 업데이트

나는 표시를 기능 HTML을 숨겨하지 않을 때 (즉, 필요에 따라 체크 박스가 범위를 업데이트하는 것입니다)입니다 숨겨진 양식을 가지고있다. 양식 자체를 사용하여 popover에 넣으면 처음에만 작동합니다. 그래서이 시점에서 나는 그 복제본을 생성하고 범위에 바인딩하여 popover에 넣으려고합니다. 여기

var getContent = function() { 
    var $content = $('#' + $scope.configuration.id + '_columnSelection'); 
    var $clone = $content.clone(true, true); 
    $compile($clone.contents())($scope); 
    return $clone; 
}; 

$columnSelector.popover({ 
html : true, 
placement : 'left', 
trigger : 'manual', 
title : 'Select Columns', 
content : getContent() 
}); 
$columnSelector.popover('toggle');

출처

2014-09-24 Pinny

범위와 HTML을 연결하려면'$ compile '을 사용해야합니다. 이 코드를 사용하여 게시 할 수 있습니까? –

이 일부 도움이되지 수도 있지만 :

<form id="{{id}}_columnSelection"> 
    <label class="checkbox" ng-repeat="field in metadata.fields"> <input type="checkbox" 
     ng-model="field.displayByDefault"> {{field.text}} 
    </label> 
</form>

내가 지금 여기, 팝 오버를 표시 할 기운 플러그인을 사용하고는 팝 오버를 트리거 JS와 HTML을 생성하는 코드입니다 내 특별한 경우에 효과가있는 솔루션입니다. 도움말은 popover를 표시하는 데 유용한 플러그인을 사용하고 있다는 사실에서 비롯된 것입니다. 그래서 AngularJS보다는 문제를 해결하기 위해 플러그인 API를 사용하고 있습니다. Tipsy는 몇 가지 방법으로 콘텐츠를 지정할 수 있습니다. 그 중 하나는 'content'옵션이고 다른 하나는 'template'옵션입니다. 템플릿 옵션을 사용하면 페이지에 생성 된 HTML을 재사용 할 수 있습니다 (동적으로 팝업을 만들 때 동적으로 만들 필요가 없습니다). 그리고 팝업 닫기에서 삭제되지 않습니다. 따라서이 경우에는 "평소처럼 일반적인 AngularJs 비즈니스"가됩니다.

출처

2014-09-29 18:50:38 Pinny

동적으로 생성 된 html을 범위 모델에 바인딩

답변

관련 문제