angular 指令与 ng-model 不绑定

Question

我创建了这个非常简单的指令 <form-field>，我正在尝试将 ng-model 绑定到该指令。我已将示例分解为最简单的用例，

我已经包含了控制器，以及它所在表单的带有 HTML 的指令。我见过很多使用 require:ngModel 然后在 link: 内发生动作的例子，但所有这些例子都只是为了 dom 操作，或者增量，例如不保存一个值

angular.module('taskApp', [])
  .controller('taskController', function($scope) {
    $scope.taskData = {};
    $scope.save = function(taskData) {
      $scope.taskData = angular.copy(taskData);
    };
  })
  .directive('formField', function($timeout) {
    var template = '<div class="form-group" ng-switch="element">' +
      '<input ng-switch-when="input" ng-model="ngModel" name="{{field}}">' +
      '<textarea ng-switch-when="textarea" ng-model="ngModel" name="{{field}}"></textarea>' +
      '</div>';
    return {
      restrict: 'EA',
      template: template,
      replace: true,
      scope: {
        ngModel: '=',
        field: '@',
        live: '@',
        element: '@'
      },
      link: function($scope, element, attr) {

      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="taskApp" ng-controller="taskController">
  <form name='taskForm' novalidate>

    <form-field element='input' live='false' field="title" ng-model="taskData.title"></form-field>

    <form-field element='textarea' live='false' field="notes" ng-model="taskData.notes"></form-field>

    <button type="submit" ng-click="save(taskData)">save</button>

  </form>

  <br/>
  <pre>{{taskData | json}}</pre>

</body>

Answer 1

ngModel 在你的指令中仍然指的是内部隔离范围。您可以使用 $parent.ngModel 访问外部模型。

var template = '<div class="form-group" ng-switch="element">' +
  '<input ng-switch-when="input" ng-model="$parent.ngModel" name="{{field}}">' +
  '<textarea ng-switch-when="textarea" ng-model="$parent.ngModel" name="{{field}}"></textarea>' +
  '</div>';

angular 指令与 ng-model 不绑定

angular directive with ng-model not binding

javascript

angularjs

angular-ngmodel

angularjs-ng-model