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

我尝试显示不同问题的列表。每个问题都有自己的形式输入。所以我写了一个指令来设置这些表单输入。但是在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="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的原始内容而不是新值。这是一个Plunker展示的行为。

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

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

相关内容

最新更新

热门标签：