Инъекционная угловая директива

Question

Я борюсь с угловой директивой, контроллер работает нормально, но я не могу сделать директиву для инъекции.

Вот Угловая Сценарий:

(function() { 
'use strict'; 

angular 
    .module('iziCooker') 
    .controller('RegistrationController', RegisterController) 
    .directive('registrationValidation', registrationValidation); 

RegisterController.$inject = ['UserService', '$location', '$rootScope', 'FlashService']; 
function RegisterController(UserService, $location, $rootScope, FlashService) { 
    var vm = this; 

    vm.register = register; 
    vm.CheckUser = CheckUser; 

    function register() { 
      vm.dataLoading = true; 
      UserService.Create(vm.user) 
       .then(function (response) { 
        if (response.success) { // 
         FlashService.Success('Registration successful', true); 
         $location.path('/home'); 
        } else { 
         FlashService.Error(response.message); 
         vm.dataLoading = false; 
        } 
       }); 
    } 

    function CheckUser($event) { 
     var usernameinput = $event.target; 
     var username = usernameinput.value; 

     if (username != '') { 
      UserService.GetByUsername(username) 
       .then(function (response) { 
        if (response.success) { 
         //username.setCustomValidity(""); 
         alert("Usuario libre!"); 
        } else { 
         alert("Usuario en uso!"); 
         //username.setCustomValidity("El nombre de usuario ingresado ya se encuentra en uso."); 
        } 
       }); 
     } 
    } 
} 

registrationValidation.$inject = ['$scope']; 
function registrationValidation($scope) { 
    $scope.emailregex = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"; 
    return { 
     restrict: "E", 
     replace: true, 
     template: "<div>Here I am to save the day</div>" 
    } 
}})(); 

Я хочу использовать директиву, чтобы подтвердить регистрационную форму. Установите регулярное выражение для пароля и электронной почты; подтвердите пароль подтверждения и адрес электронной почты; и т. д.

Я пытался вернуть объект HTML из директивы, но он также не работает.

Я хотел бы знать, есть ли у меня синтаксическая ошибка или если что-то упущено. Я не получаю никаких ошибок, контроллер вводится без каких-либо проблем, и он ничего не говорит о директиве.

Я добавляю HTML-код из представления и помечен тегом HTML для возврата директивы с помощью «***».

> 
<div class="inicio-container"> 
    <div class="row"> 
     <div class="col-lg-6 col-lg-offset-3"> 
      <div class="col-lg-12 caja"> 
       <div class="row"> 
        <div class="titulo-nivel"> 
         &iexcl;Registrate y comenzá con tu camino a la gastronomía! 
        </div> 
        ***<registrationValidation></registrationValidation>*** 
       </div> 
       <div class="row"> 
        <form class="col-lg-6 col-lg-offset-3" name="registrationForm" ng-submit="vm.register()" role="form" novalidate> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.name.$touched && registrationForm.name.$invalid }"> 
          <label for="name">Nombre</label> 
          <input type="text" class="form-control" id="input-name" name="name" placeholder="Ingresá tu nombre" ng-model="vm.user.name" ng-minlength="2" ng-maxlength="100" ng-required="true" ng-model-options="{ updateOn: 'blur' }"> 
          <div class="help-block" ng-messages="registrationForm.name.$error" ng-if="registrationForm.name.$touched"> 
           <p ng-message="minlength">El nombre que ingresaste es muy corto.</p> 
           <p ng-message="maxlength">El nombre que ingresaste es muy largo.</p> 
           <p ng-message="required">¡Tenés que completar tu nombre!</p> 
          </div> 
         </div> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.lastname.$touched && registrationForm.lastname.$invalid }"> 
          <label for="last-name">Apellido</label> 
          <input type="text" class="form-control" id="input-lastname" name="lastname" placeholder="Ingresá tu apellido" ng-model="vm.user.lastname" ng-minlength="2" ng-maxlength="100" ng-required="true" ng-model-options="{ updateOn: 'blur' }"> 
          <div class="help-block" ng-messages="registrationForm.lastname.$error" ng-if="registrationForm.lastname.$touched"> 
           <p ng-message="minlength">El apellido que ingresaste es muy corto.</p> 
           <p ng-message="maxlength">El apellido que ingresaste es muy largo.</p> 
           <p ng-message="required">¡Tenés que completar tu apellido!</p> 
          </div> 
         </div> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.birthdate.$touched && registrationForm.birthdate.$invalid }"> 
          <label for="birthdate">Fecha de nacimiento</label> 
          <input type="text" class="form-control" id="input-birthdate" name="birthdate" placeholder="Ingresá tu fecha de nacimiento" ng-model="vm.user.birthdate" ng-required="true" onfocus="(this.type = 'date')"> 
          <div class="help-block" ng-messages="registrationForm.birthdate.$error" ng-if="registrationForm.birthdate.$touched"> 
           <p ng-message="required">¡Tenés que completar tu fecha de nacimiento!</p> 
          </div> 
         </div> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.email.$touched && registrationForm.email.$invalid }"> 
          <label for="email">Dirección de correo electrónico</label> 
          <input type="email" class="form-control" id="input-email" name="email" placeholder="Ingresá tu dirección de email" ng-model="vm.user.email" ng-required="true" ng-model-options="{ updateOn: 'blur' }"> 
          <div class="help-block" ng-messages="registrationForm.email.$error" ng-if="registrationForm.email.$touched"> 
           <p ng-message="required">¡Tenés que completar tu email!</p> 
           <p ng-message="email">¡Email incorrecto!</p> 
          </div> 
         </div> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.confirmemail.$touched && registrationForm.confirmemail.$invalid }"> 
          <label for="email">Confirmar dirección de correo electrónico</label> 
          <input type="email" class="form-control" id="input-confirmemail" name="confirmemail" placeholder="Ingresá la confirmación de email" ng-model="vm.user.confirmemail" ng-required="true" ng-model-options="{ updateOn: 'blur' }"> 
          <div class="help-block" ng-messages="registrationForm.confirmemail.$error" ng-if="registrationForm.confirmemail.$touched"> 
           <p ng-message="required">¡Tenés que completar la confirmación de email!</p> 
           <p ng-message="email">¡Mail con formato incorrecto!.</p> 
          </div> 
         </div> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.username.$touched && registrationForm.username.$invalid }"> 
          <label for="username">Nombre de usuario</label> 
          <input type="text" class="form-control" id="input-username" name="username" placeholder="Ingresá tu nombre de usuario" ng-model="vm.user.username" ng-required="true"> <!--ng-blur="vm.CheckUser($event)"--> 
          <div class="help-block" ng-messages="registrationForm.username.$error" ng-if="registrationForm.username.$touched"> 
           <p ng-message="required">¡Tenés que completar tu nombre de usuario!.</p> 
          </div> 
         </div> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.password.$touched && registrationForm.password.$invalid }"> 
          <label for="password">Contraseña</label> 
          <input type="password" class="form-control" id="input-password" name="password" placeholder="Ingresá tu contraseña" ng-pattern="emailregex" ng-model="vm.user.password" ng-required="true"> 
          <div class="help-block" ng-messages="registrationForm.password.$error" ng-if="registrationForm.password.$touched"> 
           <p ng-message="required">¡Tenés que completar tu contraseña!.</p> 
           <p ng-message="pattern">La contraseña debe contar con al menos un número, una letra mayúscula y minúscula y 8 o más caracteres.</p> 
          </div> 
         </div> 
         <div class="form-group" ng-class="{ 'has-error': registrationForm.confirmpassword.$touched && registrationForm.confirmpassword.$invalid }"> 
          <label for="confirm-password">Confirmar contraseña</label> 
          <input type="password" class="form-control" id="input-confirmpassword" name="confirmpassword" placeholder="Ingresá la confirmación de contraseña" ng-pattern="emailregex" ng-model="vm.user.confirmpassword" ng-required="true"> 
          <div class="help-block" ng-messages="registrationForm.confirmpassword.$error" ng-if="registrationForm.confirmpassword.$touched"> 
           <p ng-message="required">¡Tenés que completar la confirmación de la contraseña!.</p> 
           <p ng-message="pattern">La contraseña debe contar con al menos un número, una letra mayúscula y minúscula y 8 o más caracteres.</p> 
          </div> 
         </div> 
         <div class="form-actions"> 
          <input type="submit" class="login" value="¡Registrate ahora!" ng-disabled="registrationForm.$invalid"></> 
          <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

изменение директивы элемент <registrationValidation></registrationValidation> к <registration-validation></registration-validation>

working demo

Answer 2

В $scope указаний, вводится в программу до или после линии связи функций, не определение директивы верхнего уровня.

Вот обновленная версия вашей директивы registrationValidation, которая помещает emailregex в объем.

registrationValidation.$inject = []; 
function registrationValidation() { 
    return { 
     scope: true, // Create a new child scope. 
     restrict: "E", 
     template: "<div>Here I am to save the day</div>", 
     link: function postLink($scope, $element, attrs){ 
      // Get access to the directive's scope, element and attributes. 

      $scope.emailregex = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"; 
     } 
    } 
} 

ПРИМЕЧАНИЕ: Я также установить scope: true поэтому регулярное выражение добавляется к новому ребенку объема и не мешать другим директивам, которые могут существовать в одной и той же родительской области.

Я также удалил replace: true, который у вас был с тех пор, когда он устарел и будет удален в более поздних версиях Angular.