Question

在md-tab指令中切换选项卡时，我收到以下错误消息。请注意，在Codepen中运行代码时，以及在浏览器中直接打开index.html时，我都没有看到错误。但是当我选择通过ExpressJS和Node I托管index.html（放置在app文件夹中）时，我看到了这个错误。请参阅以下两个文件。

依赖关系：

Angular v1.4.0-rc.2
Angular Material（主分公司）
Express v4.12.3
节点v0.12.3

控制台中显示错误消息：

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.4.0-rc.2/$rootScope/inprog?p0=%24digest
at REGEX_STRING_REGEXP (angular.js:68)
at beginPhase (angular.js:16056)
at Scope.$get.Scope.$apply (angular.js:15800)
at Scope.scopePrototype.$apply (hint.js:1478)
at HTMLElement.<anonymous> (hint.js:797)
at HTMLElement.eventHandler (angular.js:3247)
at redirectFocus (angular-material.js:12919)
at Object.handleFocusIndexChange [as fn] (angular-material.js:12915)
at Scope.$get.Scope.$digest (angular.js:15539)
at Scope.scopePrototype.$digest (hint.js:1468)

的index.html

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Angular Material Tabs</title>
        <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
    </head>
    
    <body ng-app="mdTabsApp" layout="column">
    <md-content class="md-padding" flex layout="row" layout-align="center start" style="background-color: #eee;">
        <md-tabs md-stretch-tabs="always"
                 md-border-bottom
                 class="md-whiteframe-z2"
                 flex
                 style="background-color:#ffffff">
            <md-tab>
                <md-tab-label>Tab 1</md-tab-label>
                <md-tab-body class="md-padding">
                    Tab 1 content
                </md-tab-body>
            </md-tab>
            <md-tab>
                <md-tab-label>Tab 2</md-tab-label>
                <md-tab-body class="md-padding">
                    Tab 2 content
                </md-tab-body>
            </md-tab>
            <md-tab>
                <md-tab-label>Tab 3</md-tab-label>
                <md-tab-body class="md-padding" >
                    Tab 3 content
                </md-tab-body>
            </md-tab>
        </md-tabs>
    </md-content>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-aria.js"></script>
    <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
    
    <script>
        (function (angular, undefined) {
            "use strict";
            angular.module('mdTabsApp', [
                'ngMaterial'
            ])
        })(angular);
    </script>
    
    </body>
    </html>

app.js

'use strict';

var express = require('express');
var app = express();

app.use(express.static('app'));

var server = app.listen(5000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('App listening at http://%s:%s', host, port);
});

Answer 1

似乎是Chrome中的本地mistical错误，因为我无法在Codepen / Runnable和Firefox中重现错误。另见https://github.com/angular/material/issues/2850

中的讨论

您可以在此处找到完整示例：https://github.com/ismarslomic/material-tabs-uirouter

md-tab导致$ digest已在进行中错误

1 个答案: