具有 ng-model 的角度指令未绑定答案

【问题标题】：angular directive with ng-model not binding具有 ng-model 的角度指令未绑定
【发布时间】：2015-12-20 19:54:49
【问题描述】：

我创建了这个非常简单的指令<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>

【问题讨论】：

标签： javascript angularjs angular-ngmodel angularjs-ng-model

【解决方案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>';

【讨论】：

有没有办法像.directive(function($timeout,$parent.scope)一样将父作用域“注入”到指令声明中，您能否详细说明它是$parent而不是兄弟的原因？
stackoverflow.com/a/17900556/1095800 我正在阅读这个答案，看起来不推荐使用 $parent 。也许有办法在我的范围内绑定scope {ngModel: =$parent.ngModel}
@kmassada 您可以通过在链接函数中注入的$scope 变量访问父作用域：$scope.$parent。我没有遇到任何关于为什么不推荐$parent的解释......至于解释，我遇到同样问题时使用的Angular版本实际上没有使用$parent，所以它必须是我不知道的内部变化。你也可以在你的指令上使用scope: true，它不会创建一个隔离作用域，并且允许你不使用$parent。