具有独立作用域的指令中的表单输入:如何将ngModel设置为正确的作用域

Form input in a directive with isolated scope: How to set ngModel to the correct scope?

本文关键字：作用域 ngModel 设置 输入 独立 指令 表单      更新时间：2023-09-26

我尝试显示不同问题的列表。每个问题都有自己的形式输入。所以我写了一个指令来设置这些表单输入。但是在input标记中设置ngModel不会更新隔离的作用域。

我目前尝试过的：

<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='"answerswer'">Answer</label>'n  
               <input ngModel='"step.answer'" ng-required='"true'" name='"answerswer'" />'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的原始内容而不是新值。这是一个Plunker展示的行为。

有没有办法让ngModel使用指令范围？或者我只是错过了什么/滥用AngularJS（这一点也不会让我感到惊讶…）

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

相关文章：