угловая директива с ng-моделью не привязывается

Я создал эту очень простую директиву под названием <form-field>, я пытаюсь связать ng-модель с этой директивой. Я разбил пример на самый простой вариант использования,

Я включил контроллер и директиву с 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
person kmassada    schedule 23.09.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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>';
person Antony Mativos    schedule 23.09.2015
comment
есть ли способ «внедрить» родительскую область в объявление директивы, такое как .directive(function($timeout,$parent.scope), и не могли бы вы уточнить, почему это $parent, а не одноуровневый? - person kmassada; 23.09.2015
comment
stackoverflow.com/a/17900556/1095800 Я читаю этот ответ, и похоже, что $parent не рекомендуется. возможно, есть способ привязки в моей области scope {ngModel: =$parent.ngModel} - person kmassada; 23.09.2015
comment
@kmassada Вы можете получить доступ к родительской области через переменную $scope, которая введена в вашу функцию ссылки: $scope.$parent. Я не нашел никакого объяснения, почему $parent не рекомендуется... Что касается объяснения, версия Angular, которую я использовал, когда столкнулся с той же проблемой, на самом деле работала без использования $parent, поэтому это должно быть внутреннее изменение, которое я не знаю о. Вы также можете использовать scope: true в своей директиве, что не создаст изолированную область и позволит вам не использовать $parent. - person Antony Mativos; 23.09.2015