注入角度指令

Question

我正在努力與角度指令，控制器工作正常，但我不能使指令被注入。

這是Angular腳本：

(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

在指令中，將$scope注入到鏈接前或鏈接后的函數中，而不是頂級指令定義中。

這是您的registrationValidation指令的更新版本，該指令將emailregex放在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版本中刪除。

Answer 2

將指令元素<registrationValidation></registrationValidation>更改為<registration-validation></registration-validation>

工作演示