Angular：使用指令创建问题

Question

我正在学习Angular，并试图获得指令的把握，我试图创建一个用于生成多项选择题的指令。这是我希望得到的工作：

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

我不认为角会明白，我想传递一个对象的问题指令的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

问题，多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创建一个子范围。

Answer 2

使用“=”而不是“&”（wh ich用于传递函数）用于选项属性。

然后，当您使用该指令时，从表达式中删除大括号。

“=”表示您想要与值进行双向绑定，在这种情况下是数组。