javascript - Angular : Creating questions using a directive

Question

我正在学习 Angular，并尝试掌握指令，我正在尝试创建一个用于生成多项选择题的指令。这是我想要的工作:

<question type="multiple-choice"
          content="Hard tacos or soft tacos?"
          options="{{ [
            'Hard tacos!',
            'Soft tacos!',
            'Porque no los dos?'] }}"></question>

我认为 Angular 不会理解我正在尝试为问题指令的 options 属性传递一个对象。

这是我的指令到目前为止的样子:

app.directive("question", function() {
  return {
    restrict: 'E',
    scope: {
      content: '@',
      options: '&'
    },
    templateUrl: function(elem, attrs) {
      return "partials/question-" + attrs.type + ".html";
    }
  }
}

这是我的模板(question-multiple-choice.html):

<h3 ng-bind="content"></h3>
<div ng-repeat="option in options()">
  <input type="radio" ng-value="option"> <span ng-bind="option"></span>
</div>

我收到以下错误，但我不知道如何继续:

Syntax Error: Token '[' is unexpected, expecting [:] at column 4 of the expression [{{ [
   'Hard tacos!',
   'Soft tacos!',
   'Porque no los dos?'] }}].

Answer 1

删除 options 属性中的插值 {{}}:

<强> DEMO

<question type="multiple-choice"
          content="Hard tacos or soft tacos?"
          options="[
            'Hard tacos!',
            'Soft tacos!',
            'Porque no los dos?']"></question>

此外，您的 templateUrl 回调 attr.type 中存在拼写错误，应为 attrs.type

更新:既然您希望有一个属性作为单选按钮的模型，为什么不使用 = 范围表示法添加 ng-model 属性本身。

<强> UPDATED DEMO

question-multiple-choice.html

    <h3 ng-bind="content"></h3>
    <div ng-repeat="option in options()">
      <input ng-model="$parent.ngModel" type="radio" ng-value="option" name="option"> <span ng-bind="option"></span>
    </div>

指令

app.directive("question", function() {
  return {
    restrict: 'E',
    scope: {
      content: '@',
      options: '&',
      ngModel: '='
    },
    templateUrl: function(elem, attrs) {
      return "question-" + attrs.type + ".html";
    }
  }
});

请注意，我在模板中使用了 $parent.ngModel，因为 ng-repeat 创建了一个子作用域。