注入 Angular 指令

Question

我正在努力处理 angular 指令，控制器工作正常，但我无法使指令被注入。

这是 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>"
    }
}})();

我想使用指令来验证注册表。设置密码和电子邮件的正则表达式；验证确认密码和电子邮件；等等

我试图从指令中 return 一个 HTML 对象，但它也不起作用。

我想知道我是否有语法错误或是否遗漏了什么。我没有收到任何类型的错误，控制器注入没有任何问题，它没有说明指令的任何内容。

我从视图中添加了 html 代码，并用“***”标记了指令 return 的 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 被注入到 pre- 或 post-link 函数中，而不是顶级指令定义中。

这是您的 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 的更高版本中删除。

Answer 2

将指令元素 <registrationValidation></registrationValidation> 更改为 <registration-validation></registration-validation>

working demo

注入 Angular 指令

Injecting Angular Directive

javascript

regex

directive

angularjs