특정 반투명 요소에 내용 삽입하기 (각도)

Question

객관식 액티비티를 생성하라는 지시문을 만들려고합니다. 아이디어는 내 범위에서 내가 같은 질문의 배열과 모델을 가지고있다 :

function Ctrl2($scope) { 
    $scope.activity1 = { 
     "questions": [ 
      { 
       "question": "This is the first question", 
       "answers": ["answer1", "answer2"] 
      }, 
      { 
       "question": "When was the American revolution?", 
       "answers": [1776, 1881, 1778] 
      } 
     ] 
    }; 
} 

나는 범위에서 문제를 발견 지시문이 다음 지시문 요소에 추가합니다. 여기에 (명확성을 위해 단순화 된) 나의 지시

.directive('multipleChoice', function(){ 
    return{ 
     templateUrl: "<div class='ng-transclude'></div>", 
     scope: { 
      activity:'=' 
     }, 
     replace: true, 
     transclude: true, 
     link: function(scope, element, attrs){ 
      for (var i=0;i<scope.activity.questions.length;i++){ 
       var question=scope.activity.questions[i]; 
       element.append(question.question); 
      } 
      element.append("<button ng-submit='submit()'>Submit</button><button>Show Solutions</button>") 
     } 
    } 
}) 

가끔 내가 질문 사이의 HTML 콘텐츠를 삽입 할, 그러나이다. 내가 이렇게하는 것을 상상했던 방식. 내 HTML에서 는

<div multiple-choice activity="activity1"> 
     <div id="question1"></div> 
     <img src=question2.jpg/> 
    </div> 

하고 대신 ID = "question1"를 가진 요소에 추가 지시어 요소에 추가 내 지시를 메신저. 1 재 질문 모델 :

내가 쉬운 솔루션으로 JQuery와 사용하는 것입니다 알고 그러나

if (question.ctn!==undefined){ 
    $(ctn).append(question.question); 
} 
else{ 
    element.append(question.question) 
} 

하고 내 지시에 다음

{ 
    "question": "This is the first question", 
    "answers": ["answer1", "answer2"], 
    "ctn": "#question1" 
} 

하고, 내가 있고 싶어 멀리 JQuery에서 "각도 방법"을 시도하십시오. 내가 생각할 수있는

또 다른 해결책은 내 HTML에서 이런 일을하는 것입니다 :

<div multiple-choice activity="activity1"> 
     <div>{{activity.questions.question[0]}}</div> 
     <img src=question2.jpg/> 
    </div> 

그러나, 나는 그것이 어떻게 작동하는지 모르겠어요.

당신은 어떻게 생각하십니까? jQuery를 사용해야합니까, 아니면 더 좋은 방법이 있습니까?

Answer 1

나는 이것을하는 것이 나쁜 습관이고 Angular 's philisophy에 반대한다고 생각합니다. 가능한 한 jQuery와 같은 컨텐츠 삽입을 피하려고 노력해야합니다.