0

我正在尝试创建一个指令来创建多项选择活动。这个想法是，在我的范围内，我有一个带有一系列问题的模型：

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" 的元素。

我知道一个简单的解决方案是将 JQuery 与： 1- 返工问题模型：

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

然后在我的指令中做

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

但是，我想远离 JQuery 并尝试使用“Angular Way”。

我能想到的另一个解决方案是在我的 HTML 中包含这样的内容：

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

但是，我不确定这将如何工作。

你怎么看？我必须使用 jQuery 还是有更好的方法？

4

1 回答 1

3

我认为这样做是不好的做法，并且违背了 Angular 的哲学。您应该尽量远离类似 jQuery 的内容插入。

于 2013-10-04T17:34:14.413 回答