问题描述
用户访问首页的时候，会默认路由到注册页面register.htm，而register.htm中定义了属性指令ensure-unique,但是directive.js中指令没有绑定上，指令没有起作用，不知道是何原因，前端没有报错，请帮忙看下首页index.htm
<html lang='en' ng-app='myApp'><head> <meta charset='UTF-8'> <link rel='stylesheet' href='https://www.6hehe.com/wenda/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='https://www.6hehe.com/wenda/js/bower_components/jquery/dist/jquery.min.js'></script><script src='https://www.6hehe.com/wenda/js/bower_components/bootstrap/dist/js/bootstrap.min.js'></script><script src='https://www.6hehe.com/wenda/js/bower_components/angular/angular.js'></script><script src='https://www.6hehe.com/wenda/js/bower_components/angular-bootstrap/ui-bootstrap.min.js'></script><script src='https://www.6hehe.com/wenda/js/bower_components/angular/angular-route.min.js'></script><script src='https://www.6hehe.com/wenda/js/service.js'></script><script src='https://www.6hehe.com/wenda/js/app.js'></script></body></html>
service.js是空的，留着以后用
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’ }); }]);
register.htm 注册页面,这里增加了属性指令ensure-unique
<p class='col-md-4 col-md-offset-4 text-left'> <form name='registerForm' method='post' action='register.html'><p ng-class='{’has-error’:registerForm.email.$touched && registerForm.email.$dirty && registerForm.email.$invalid}'> <label for='email'>Email Address</label> <input type='email' name='email' ng-model='email' required ensure-unique='email' placeholder='Email Address'/> <p 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 ng-class='{’has-error’:registerForm.username.$touched && registerForm.username.$dirty && registerForm.username.$invalid}'> <label for='username'>Username</label> <input name='username' ng-model='username' ensure-unique='username' placeholder='Username' required/> <p ng-show='registerForm.username.$touched && registerForm.username.$dirty && registerForm.username.$invalid'><span ng-show='registerForm.username.$error.required'>用户名不能为空</span> </p></p><p ng-class='{’has-error’:registerForm.password.$touched && registerForm.password.$dirty && registerForm.password.$invalid}'> <label for='password'>Password</label> <input type='password' name='password' required ng-minlength='6' ng-maxlength='10' ng-model='password' placeholder='Password'/> <p 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 ng-class='{’has-error’:registerForm.repassword.$touched && registerForm.password.$dirty && registerForm.repassword.$dirty && (repassword != password)}'> <label for='repassword'>Repassword</label> <input type='password' name='repassword' ng-model='repassword' placeholder='Repassword'/> <p 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='https://www.6hehe.com/wenda/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); });} });} }}]);
问题解答
回答1：已经解决了，没有指令的module注入到myApp的module中
回答2：楼主你好，你的问题是怎么解决的？为什么你还写了一个module呢？在app.js一个module不就可以了吗？
