angulaire.js - Problème de liaison d'instructions de la page de routage Angularjs

Lorsque les utilisateurs visitent la page d'accueil, ils seront redirigés vers la page d'inscription register.htm par défaut, et l'instruction d'attribut Ensure-unique est définie dans Register.htm, mais l'instruction dans directive.js n'est pas liée et ne le fait pas. fonctionne. Je ne sais pas. Quelle est la raison ? Aucune erreur n'est signalée dans le front-end. Veuillez aider à vérifier
Homepage index.htm

<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        .form-signin {
            max-width: 400px;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
        }
    </style>
    <title>登陆页面</title>
</head>
<body>
<p class="container">
    <p ng-view></p>
</p>
<script src="js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/bower_components/angular/angular.js"></script>
<script src="js/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="js/bower_components/angular/angular-route.min.js"></script>
<script src="js/service.js"></script>
<script src="js/app.js"></script>
</body>
</html>

service.js est vide, enregistrez-le pour une utilisation future

app.js

myApp = angular.module("myApp", ["ui.bootstrap", "ngRoute"]);

myApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/index', {
                templateUrl: 'templates/index.htm'
            }).
            when('/register', {
                templateUrl: 'templates/register.htm'
            }).
            when('/login', {
                templateUrl: 'templates/login.htm'
            }).
            otherwise({
                redirectTo: '/register'
            });
    }]);

Page d'inscriptionregister.htm, ici ajoutée instruction d'attribut assurer-unique

<p class="col-md-4 col-md-offset-4 text-left">
    <form name="registerForm" class="form-signin" method="post" action="register.html">
        <p class="form-group"
             ng-class="{'has-error':registerForm.email.$touched && registerForm.email.$dirty && registerForm.email.$invalid}">
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" ng-model="email" required class="form-control"
                   ensure-unique="email" placeholder="Email Address"/>

            <p class="help-block"
               ng-show="registerForm.email.$touched && registerForm.email.$dirty && registerForm.email.$invalid">
                <span ng-show="registerForm.email.$error.required">邮件名不能为空</span>
                <span ng-show="registerForm.email.$error.email">非法的邮箱地址</span>
            </p>
        </p>
        <p class="form-group"
             ng-class="{'has-error':registerForm.username.$touched && registerForm.username.$dirty && registerForm.username.$invalid}">
            <label for="username">Username</label>
            <input id="username" name="username" ng-model="username" class="form-control"
                   ensure-unique="username" placeholder="Username" required/>

            <p class="help-block"
               ng-show="registerForm.username.$touched && registerForm.username.$dirty && registerForm.username.$invalid">
                <span ng-show="registerForm.username.$error.required">用户名不能为空</span>
            </p>
        </p>
        <p class="form-group"
             ng-class="{'has-error':registerForm.password.$touched && registerForm.password.$dirty && registerForm.password.$invalid}">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required ng-minlength="6" ng-maxlength="10"
                   ng-model="password" class="form-control" placeholder="Password"/>

            <p class="help-block"
               ng-show="registerForm.password.$touched && registerForm.password.$dirty && registerForm.password.$invalid">
                <span ng-show="registerForm.password.$error.required">密码不能为空</span>
                <span ng-show="registerForm.password.$error.minlength">密码长度至少为6</span>
                <span ng-show="registerForm.password.$error.maxlength">密码长度不能超过10</span>
            </p>
        </p>
        <p class="form-group"
             ng-class="{'has-error':registerForm.repassword.$touched && registerForm.password.$dirty && registerForm.repassword.$dirty && (repassword != password)}">
            <label for="repassword">Repassword</label>
            <input type="password" id="repassword" name="repassword" ng-model="repassword" class="form-control"
                   placeholder="Repassword"/>

            <p class="help-block"
               ng-show="registerForm.repassword.$touched && registerForm.password.$dirty && registerForm.repassword.$dirty && (repassword != password)">
                <span>密码与重复密码不一致</span>
            </p>
        </p>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</p>
<script src="js/directive.js"></script>

directive.js

myAppDirective=angular.module("myAppDirective",[]);

myAppDirective.directive('ensureUnique', ['$http', function ($http) {
    return {
        require: 'ngModel',
        link: function (scope, ele, attrs, c) {
            console.log("executed!");
            ele.bind('blur', function () {
                if (attrs.ensureUnique == "username") {
                    $http({
                        method: 'POST',
                        url: 'check/' + attrs.ensureUnique + ".html",
                        data: {"username": scope.username}
                    }).success(function (data, status, headers, cfg) {
                        c.$setValidity('unique', true);
                    }).error(function (data, status, headers, cfg) {
                        c.$setValidity('unique', false);
                    });
                } else if (attrs.ensureUnique == "email") {
                    $http({
                        method: 'POST',
                        url: 'check/' + attrs.ensureUnique + ".html",
                        data: {"email": scope.email}
                    }).success(function (data, status, headers, cfg) {
                        c.$setValidity('unique', true);
                    }).error(function (data, status, headers, cfg) {
                        c.$setValidity('unique', false);
                    });
                }
            });
        }
    }
}]);

伊谢尔伦2849 Il y a quelques jours1309

angulaire.js - Problème de liaison d'instructions de la page de routage Angularjs

répondre à tous(2)je répondrai