【问题标题】:angular material design md-switch doesnt work within a tab角度材料设计 md-switch 在选项卡中不起作用
【发布时间】:2014-12-13 01:09:44
【问题描述】:

在选项卡中放置开关( md-switch 指令)时,会引发 aria 错误

ARIA:可访问性所需的属性“aria-label”在节点上缺失:​...​​

无论是否存在 aria 标签,都会发生这种情况。如果将开关移到选项卡之外,它会按预期工作。

plunker 显示问题 http://plnkr.co/edit/FmZAyLBpzhURbdZuuhQK?p=preview

<div ng-app="app" ng-controller="ctrl" >
    <md-tabs md-selected="selectedIndex">
        <md-tab id="tab1">Item One</md-tab>
    </md-tabs>
    <ng-switch on="selectedIndex" class="tabpanel-container">
        <div role="tabpanel" id="tab1-content" ng-switch-when="0">
            <div>
                <md-switch aria-label="toggle" ng-model="data.switch">Switch : {{ toggle }}</md-switch>
            </div>
        </div>
    </ng-switch>
</div>

<script>
    var app = angular.module('app', ['ngMaterial']);

    app.controller("ctrl", function ($scope) {
        $scope.toggle = false;
        $scope.selectedIndex = 0;
    });
</script>

【问题讨论】:

    标签: angularjs material-design


    【解决方案1】:

    这很奇怪.. 这个问题似乎已通过最新版本的角材料(版本 0.6.1-master-0767813)得到解决。

    这里是 plunker:http://plnkr.co/edit/chEaf9i50mIiThp0Jloq?p=preview

    我刚刚将脚本更改为最新版本:

    <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
    <script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
    

    您还需要将 ng-model 更改为切换值。所以不要使用

    ng-model="data.switch"
    

    你需要使用

    ng-model="toggle"
    

    指向 $scope.toggle。

    【讨论】:

    • 我该怎么办?如果我需要更改数组上的项目。我有一些问题。
    猜你喜欢
    • 2016-08-10
    • 2017-11-04
    • 1970-01-01
    • 2018-11-16
    • 2020-06-17
    • 2017-07-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多