AngularJS - вопрос о выпуске директивы с подтверждением формы

Question

Я работаю над директивой ввода формы.
http://jsfiddle.net/TR9Qt/1/

<form name="form"> 
<ng-form-field label="Email validation NOT working"></ng-form-field> 
<label for="test_email">Test Email with working validation</label> 
<input type="email" name="test_email" 
ng-model="formData.testEmail" placeholder="Email" required /> 
<div class="error-message" ng-show="form.test_email.$dirty && form.test_email.$invalid"> <span ng-show="form.test_email.$error.required">Tell us your email.</span> 

    <span 
    ng-show="form.test_email.$error.email">This is not a valid email.</span> 
</div> 

var myApp = angular.module('myApp', []); 

myApp.directive('ngFormField', function ($compile) { 
var labelTemplate = '<label for="user_email">{{label}}</label>'; 
var inputTemplate = '<input type="email" name="user_email" ng-model="formData.email" placeholder="Email" required />' + 

    '<div class="error-message" ng-show="form.user_email.$dirty && form.user_email.$invalid">' + 
    '<span ng-show="form.user_email.$error.required">Tell us your email.</span>' + 
    '<span ng-show="form.user_email.$error.email">This is not a valid email.</span>' + 
    '</div>'; 


return { 
    transclude: true, 
    scope: { 
     label: '@' 
    }, 
    // append 
    replace: true, 
    // attribute restriction 
    restrict: 'E', 
    controller: function ($scope, $element, $attrs) {}, 
    // linking method 
    link: function ($scope, element, attrs) { 
     element.html(labelTemplate + inputTemplate); 

     $compile(element.contents())($scope); 
    } 
} 

});

Почему бы не подтвердить форму, когда я положил ее в директиве?

Спасибо,
Tee

Answer 1

Я не директивы про еще, но две вещи выскочила на меня:

1. Вам не нужно компилировать директиву, если это не используется в ng-повторе.

2. Ваша директива была привязана к метке вместо поля формы.

   <input 
       ng-form-field 
       type="email" 
       name="test_email" 
       ng-model="formData.testEmail" 
       placeholder="Email" 
       required /> 
   

http://jsfiddle.net/sharondio/c8hwj/

Answer 2

Немного опоздал на вечеринку, но проблема вы запускали в том, что вы использовали изолированную сферу, когда вы пытаетесь скомпилировать. Изолированная область не наследуется от родителя напрямую, но она по-прежнему доступна через $ parent. Я решил вашу проблему, просто привязав значение атрибута метки к текущей области; это может быть не то, что вы хотите, но оно решает вашу непосредственную проблему.

 
var myApp = angular.module('myApp', []); 

myApp.directive('ngFormField', function ($compile) { 
    var labelTemplate = '{{label}}'; 
    var inputTemplate = '' + 

     '' + 
     'Tell us your email.' + 
     'This is not a valid email.' + 
     ''; 
    return { 
     // append 
     replace: true, 
     // attribute restriction 
     restrict: 'E', 
     // linking method 
     link: function ($scope, element, attrs) { 
      $scope.label = attrs.label; 
      element.html(labelTemplate + inputTemplate); 
      $compile(element.contents())($scope); 
     } 
    }; 
}); 

Работа plunker