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：使用指令創建問題

回答

相關問題