您的位置：首页 > Web前端 > AngularJS

[AngularJS] Angular1.3 ngAria - 1

2014-11-14 21:24 120 查看

Accessibility is an often overlooked essential feature of a web application. a11y Is a critical component of your AngularJS application. It should be considered early in an applications life. The ng-aria module gets you started quickly, adding instant upgrades to your Angular app's accessibility.

Want to learn more about accessibility and AngularJS? Check out this great talk:AngularJS Accessibility by Marcy Sutton at ng-europe 2014.

Read More: http://jsbin.com/jopex/2/edit

HTML  CSS  JS  Result
Edit on
<html>
<head>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-aria.js"></script>
<script src="app.js"></script>
<title>Egghead Lesson by kentcdodds</title>
</head>
<body ng-app="app" ng-controller="MainCtrl as vm">
<h1>Angular version: {{vm.angularVersion}}</h1>
<h2>
{{vm.lessonTitle || 'Angular Lesson'}}
<small>by <a href="http://twitter.com/kentcdodds">@kentcdodds</a></small>
</h2>
<hr />

<h2>Demo</h2>

<form ng-init="vm.radio='1'">
Input Email:<br /><input type="email" show-attrs ng-model="vm.input" />
Textarea:<br /><textarea show-attrs ng-model="vm.textarea"></textarea>

Radio:<br />
<input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="1" />
<input name="myRadio" show-attrs type="radio" ng-model="vm.radio" value="2" />

Checkbox:<br /><input show-attrs type="checkbox" ng-model="vm.checkbox" />
Range:<br /><input show-attrs type="range" ng-model="vm.range" min="0" max="25" />
Hide/Show:<input type="checkbox" ng-model="vm.show" /><input show-attrs ng-show="vm.show" ng-model="hidden" />
Invalid:<br /><input show-attrs type="email" ng-model="vm.email" />
Required:<br /><input show-attrs ng-model="vm.required" required />
Disabled:<input type="checkbox" ng-model="vm.disable" /><br /><button show-attrs type="submit" ng-disabled="vm.disable">Submit</button>
</form>

</body>
</html>

/**
* Created by Answer1215 on 11/14/2014.
*/
var app = angular.module('app', ['ngAria']);

app.controller('MainCtrl', function MainCtrl() {
'use strict';
var vm = this;
vm.angularVersion = angular.version.full;
vm.lessonTitle = 'How to use the ngAria module';

});

app.directive('showAttrs', function() {
return function(scope, el, attrs) {
var pre = document.createElement('pre');
el.after(pre);
scope.$watch(function() {
var attrs = {};
Array.prototype.slice.call(el[0].attributes, 0).forEach(function(item) {
if (item.name !== 'show-attrs') {
attrs[item.name] = item.value;
}
});
return attrs;
}, function(newAttrs, oldAttrs) {
pre.innerText = JSON.stringify(newAttrs, null, 2);
}, true);
}
});

Also in angular.config(), you can use $ariaProvider to disable some aria value:

ariaHidden –

{boolean}

– Enables/disables aria-hidden tags

ariaChecked –

{boolean}

– Enables/disables aria-checked tags

ariaDisabled –

{boolean}

– Enables/disables aria-disabled tags

ariaRequired –

{boolean}

– Enables/disables aria-required tags

ariaInvalid –

{boolean}

– Enables/disables aria-invalid tags

ariaMultiline –

{boolean}

– Enables/disables aria-multiline tags

ariaValue –

{boolean}

– Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags

tabindex –

{boolean}

– Enables/disables tabindex tags

var app = angular.module('app', ['ngAria'])
.config(function($ariaProvider){
$ariaProvider.config({
ariaInvalid: true
})
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航