Angular：使用指令创建问题

我正在学习Angular，并试图获得指令的把握，我试图创建一个用于生成多项选择题的指令。这是我希望得到的工作：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?'] }}].

来源

2014-11-23 Mephoros

删除您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创建一个子范围。

来源

2014-11-23 05:30:31 ryeballar

啊好的，这工作得很好。后续：我添加了一个新的属性，标识符。我想将这个属性的值设置为我的控制器的作用域对象'answers'的ng-model（通过'ng-model =“answers [identifier]”'）。我只是需要transclude：这是真的吗？ – Mephoros 2014-11-23 05:47:28

请检查我的更新 – ryeballar 2014-11-23 06:03:21

Ahhh哇我不认为我会想到这么简单。非常感激。用Angular包装我的头部肯定有很多！ – Mephoros 2014-11-23 06:06:42

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

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

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

来源

2014-11-23 05:29:00

'options'属性是一个常量数组，双向数据绑定并不适合这种情况。 – ryeballar 2014-11-23 05:32:13

@ryeballar也许，但我很确定它会工作。顺便也没有传递一个函数引用＆。如果OP没有删除＆，我没有看到你的答案如何解决问题。考虑到你的评论，OP可以使用@，然后在options属性上执行scope.eval（）。但我的方式，他可以最终传递一个数组对象，而不是一个内联数组。 – 2014-11-23 05:39:56

@ryeballar确定我猜错了:)看看你的演示，为什么它和＆一起工作？ – 2014-11-23 05:44:22

Angular：使用指令创建问题

回答

相关问题