Question

我尝试显示不同问题的列表。每个问题都有自己的表格输入。所以我写了一个指令来设置这些表单输入。但是，在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将输出$scope.step的原始内容，而不是新值。 Here a Plunker显示了这种行为。

有没有办法让ngModel使用指令范围？或者我只是遗漏了某些东西/滥用AngularJS（这不会让我感到惊讶......）

Answer 1

ngModel的属性语法为ng-model，即ng-model=\"step.answer\"

具有隔离范围的指令中的表单输入：如何将ngModel设置为正确的范围？

1 个答案: