さまざまな質問のリストを表示しようとしています。各質問には、独自のフォーム入力があります。そこで、これらのフォーム入力をセットアップするディレクティブを作成しました。ただし、タグを設定ngModelしても、分離スコープは更新されません。input
私が現在試したこと：
<body ng-app="stepModule" ng-controller="ChallengeCtrl">
<div question step="step"></div>
</body>
そしてJS：
angular.module('stepModule', [])
.directive('question', function() {
return {
restrict: 'A',
replace: true,
scope: {
step: '='
},
template: "<form ng-submit=\"submit()\">\n
Step = {{step}}\n
<label for=\"question\">Question</label>\n
<input ngModel=\"step.question\" ng-required=\"true\" name=\"question\" />\n
<label for=\"answer\">Answer</label>\n
<input ngModel=\"step.answer\" ng-required=\"true\" name=\"answer\" />\n
<input type=\"submit\" value=\"Save (extract out, should save automatically)\" />\n
</form>",
controller: [
"$scope", "$element", "$attrs", function($scope, $element, $attrs) {
$scope.submit = function() {
console.log($scope.step.question);
console.log($scope.step.answer);
};
}
]
};
});
ここでは、新しい値console.logではなく元の内容を出力します。ここで、その動作を示す Plunkerを示します。$scope.step
ngModelディレクティブ スコープを使用する方法はありますか? それとも、単に何かが欠けている/AngularJSを悪用しているだけですか(これは私を驚かせることはありません...)