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

我知道一个简单的解决方案是使用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或者有更好的方法吗？

Answer 1

我认为这样做是不好的做法，违背了Angular的理念。你应该尽量远离类似jQuery的内容插入。

将内容插入特定的transcluded元素（Angular）

1 个答案: