angularjs - md-tab causes $digest already in progress error -
when switching tabs in md-tab directive error message below. note neither see error when running code in codepen nor when opening index.html directly in browser. when choose host index.html (placed in app folder) through expressjs , node see error. see 2 files below.
dependencies:
- angular v1.4.0-rc.2
- angular material (master branch)
- express v4.12.3
- node v0.12.3
error message displayed in console:
error: [$rootscope:inprog] $digest in progress http://errors.angularjs.org/1.4.0-rc.2/$rootscope/inprog?p0=%24digest @ regex_string_regexp (angular.js:68) @ beginphase (angular.js:16056) @ scope.$get.scope.$apply (angular.js:15800) @ scope.scopeprototype.$apply (hint.js:1478) @ htmlelement.<anonymous> (hint.js:797) @ htmlelement.eventhandler (angular.js:3247) @ redirectfocus (angular-material.js:12919) @ object.handlefocusindexchange [as fn] (angular-material.js:12915) @ scope.$get.scope.$digest (angular.js:15539) @ 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 @ http://%s:%s', host, port); });
seems local mistical bug in chrome, can´t reproduce error in codepen/runnable nor in firefox. see discussion in https://github.com/angular/material/issues/2850
you can find complete sample here: https://github.com/ismarslomic/material-tabs-uirouter
Comments
Post a Comment