未知提供者：ngAriaProvider＆lt; - ngAria
我正在尝试使用此演示的部分内容。我收到提供商的错误。
http://simpulton.github.io/angularjs-mailchimp-signup/
源
https://github.com/simpulton/angularjs-mailchimp-signup
bower.json
{
"name": "test",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.7",
"bootstrap": "^3.3.5",
"angular-animate": "^1.4.7",
"angular-cookies": "^1.3.0",
"angular-resource": "^1.3.0",
"angular-route": "^1.3.0",
"angular-sanitize": "^1.3.0",
"angular-touch": "^1.3.0",
"angular-stripe": "~4.2.8",
"angular-payments": "*",
"angular-aria": "^1.4.8",
"angular-messages": "^1.4.8"
},
"devDependencies": {
"angular-mocks": "^1.3.0"
},
"appPath": "app",
"moduleName": "testApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
控制器
var testApp = angular.module('testApp');
testApp.controller('SignUpController', ['$scope','$location', '$resource','$modal', '$cookieStore' , '$http', 'ngAria', 'ngMessages', 'ngAnimate', function ($scope, $location, $resource, $modal, $cookieStore, $http, ngAria, ngMessages, ngAnimate) {
var ctrl = this, newCustomer = { email:'', userName:'', password:'' };
var signup = function () {
if( ctrl.signupForm.$valid) {
ctrl.showSubmittedPrompt = true;
clearForm();
}
};
var clearForm = function () {
ctrl.newCustomer = { email:'', userName:'', password:'' }
ctrl.signupForm.$setUntouched();
ctrl.signupForm.$setPristine();
};
var getPasswordType = function () {
return ctrl.signupForm.showPassword ? 'text' : 'password';
};
var toggleEmailPrompt = function (value) {
ctrl.showEmailPrompt = value;
};
var toggleUsernamePrompt = function (value) {
ctrl.showUsernamePrompt = value;
};
var hasErrorClass = function (field) {
return ctrl.signupForm[field].$touched && ctrl.signupForm[field].$invalid;
};
var showMessages = function (field) {
return ctrl.signupForm[field].$touched || ctrl.signupForm.$submitted
};
ctrl.showEmailPrompt = false;
ctrl.showUsernamePrompt = false;
ctrl.showSubmittedPrompt = false;
ctrl.toggleEmailPrompt = toggleEmailPrompt;
ctrl.toggleUsernamePrompt = toggleUsernamePrompt;
ctrl.getPasswordType = getPasswordType;
ctrl.hasErrorClass = hasErrorClass;
ctrl.showMessages = showMessages;
ctrl.newCustomer = newCustomer;
ctrl.signup = signup;
ctrl.clearForm = clearForm;
}])
.directive('validatePasswordCharacters', function () {
return {
require: 'ngModel',
link: function ($scope, element, attrs, ngModel) {
ngModel.$validators.lowerCase = function (value) {
var pattern = /[a-z]+/;
return (typeof value !== 'undefined') && pattern.test(value);
};
ngModel.$validators.upperCase = function (value) {
var pattern = /[A-Z]+/;
return (typeof value !== 'undefined') && pattern.test(value);
};
ngModel.$validators.number = function (value) {
var pattern = /\d+/;
return (typeof value !== 'undefined') && pattern.test(value);
};
ngModel.$validators.specialCharacter = function (value) {
var pattern = /\W+/;
return (typeof value !== 'undefined') && pattern.test(value);
};
ngModel.$validators.eightCharacters = function (value) {
return (typeof value !== 'undefined') && value.length >= 8;
};
}
}
})
;
错误：
Error: [$injector:unpr] Unknown provider: ngAriaProvider <- ngAria <- SignUpController
http://errors.angularjs.org/1.4.8/$injector/unpr?p0=ngAriaProvider%20%3C-%20ngAria%20%3C-%20SignUpController
at http://localhost:8000/bower_components/angular/angular.js:68:12
at http://localhost:8000/bower_components/angular/angular.js:4334:19
at Object.getService [as get] (http://localhost:8000/bower_components/angular/angular.js:4482:39)
at http://localhost:8000/bower_components/angular/angular.js:4339:45
at getService (http://localhost:8000/bower_components/angular/angular.js:4482:39)
at invoke (http://localhost:8000/bower_components/angular/angular.js:4514:13)
at Object.instantiate (http://localhost:8000/bower_components/angular/angular.js:4531:27)
at http://localhost:8000/bower_components/angular/angular.js:9197:28
at link (http://localhost:8000/bower_components/angular-route/angular-route.js:977:26)
at invokeLinkFn (http://localhost:8000/bower_components/angular/angular.js:8841:9) <div ng-view="" class="ng-scope" data-ng-animate="1">
路线：
.when('/SignUp', {
templateUrl: 'views/signup.html',
controller: 'SignUpController',
controllerAs: 'ctrl'
})
signup.html
<div class="signup-wrapper">
<div class="logo">
<img src="img/signup/logo.png" alt="Logo"/>
</div>
<div class="alert alert-success message-animation" role="alert" ng-if="ctrl.showSubmittedPrompt">
Thank you! Your account has been created.
</div>
<form name="ctrl.signupForm" ng-submit="ctrl.signup()" novalidate>
<div class="form-group" ng-class="{'has-error':ctrl.hasErrorClass('email')}">
<label for="email">Email</label>
<input id="email" name="email" class="form-control" type="email" required
ng-model="ctrl.newCustomer.email" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="ctrl.toggleEmailPrompt(true)" ng-blur="ctrl.toggleEmailPrompt(false)"/>
<div class="my-messages">
<div class="prompt message-animation" ng-if="ctrl.showEmailPrompt">
What's your email address?
</div>
</div>
<div class="my-messages" ng-messages="ctrl.signupForm.email.$error" ng-if="ctrl.showMessages('email')">
<div class="message-animation" ng-message="required">
<strong>This field is required.</strong>
</div>
<div class="message-animation" ng-message="email">
<strong>Please format your email correctly.</strong>
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error':ctrl.hasErrorClass('userName')}">
<label for="userName">Username</label>
<input id="userName" name="userName" class="form-control" type="text" required
ng-model="ctrl.newCustomer.userName" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="ctrl.toggleUsernamePrompt(true)" ng-blur="ctrl.toggleUsernamePrompt(false)"/>
<div class="my-messages">
<div class="prompt message-animation" ng-if="ctrl.showUsernamePrompt">
Choose a username that contains only letters and numbers, or use your email address.
</div>
</div>
<div class="my-messages" ng-messages="ctrl.signupForm.userName.$error" ng-if="ctrl.showMessages('userName')">
<div class="message-animation" ng-message="required">
<strong>This field is required.</strong>
</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="input-group" ng-class="{'has-error':ctrl.hasErrorClass('password')}">
<input id="password" name="password" class="form-control" required
type="{{ctrl.getPasswordType()}}"
ng-model-options="{ updateOn : 'default blur' }"
ng-model="ctrl.newCustomer.password"
validate-password-characters/>
<span class="input-group-addon">
<input type="checkbox" ng-model="ctrl.signupForm.showPassword"> Show
</span>
</div>
<div class="my-messages" ng-messages="ctrl.signupForm.password.$error" ng-if="ctrl.showMessages('password')">
<div class="message-animation" ng-message="required">
<strong>This field is required.</strong>
</div>
</div>
<div class="password-requirements" ng-if="!ctrl.signupForm.password.$valid">
<ul class="float-left">
<li ng-class="{'completed':!ctrl.signupForm.password.$error.lowerCase}">One lowercase character</li>
<li ng-class="{'completed':!ctrl.signupForm.password.$error.upperCase}">One uppercase character</li>
<li ng-class="{'completed':!ctrl.signupForm.password.$error.number}">One number</li>
</ul>
<ul class="selfclear clearfix">
<li ng-class="{'completed':!ctrl.signupForm.password.$error.specialCharacter}">One special character</li>
<li ng-class="{'completed':!ctrl.signupForm.password.$error.eightCharacters}">Eight characters minimum</li>
</ul>
</div>
<div class="alert alert-success message-animation" role="alert" ng-if="ctrl.signupForm.password.$valid">
Your password is secure and you are good to go!
</div>
</div>
<button class="btn btn-primary" type="submit">Create My Account</button>
</form>
</div>
App.js
angular.module('testApp', [
'angularPayments',
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'mm.foundation',
'angularSpinner',
'angularjs-dropdown-multiselect',
'ngMessages',
'ngAria'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
index.html
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-stripe/release/angular-stripe.js"></script>
<script src="bower_components/angular-payments/lib/angular-payments.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<!-- endbower -->
<!-- endbuild -->
答案 0 :(得分：1)
ngAria不需要注入控制器。它有一个提供程序，您可以在引导时进行管理（通过注入$ariaProvider），就是这样。根据此处的文档：https://docs.angularjs.org/guide/accessibility
您应该从控制器中删除该依赖项，它将正常工作。
实际上，是整个控制器吗？您正在注入大量未使用的依赖项。您引用的示例源也没有任何一个，现在我只是看了它。