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

Popular posts from this blog

Email notification in google apps script -

c++ - Difference between pre and post decrement in recursive function argument -

javascript - IE11 incompatibility with jQuery's 'readonly'? -