Md-tab raises $ digest error
When switching tabs in the md-tab directive, I get the error below. Please note, I do not see an error when running the code in Codepen or when opening index.html directly in a browser. But when I decided to host index.html (placed in my application folder) via ExpressJS and Node, I see this error. See the two files below.
Dependencies:
- Angular v1.4.0-rc.2
- Angular Material (main branch)
- Express v4.12.3
- Node v0.12.3
The error message displayed in the console:
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);
});
+3
source to share
1 answer
It seems to be a local error in my Chrome as I cannot reproduce the error in Codepen / Runnable and Firefox. See also discussion at https://github.com/angular/material/issues/2850
You can find a complete sample here: https://github.com/ismarslomic/material-tabs-uirouter
0
source to share