1
我正在开发一个使用AngularJS + Angular Material + Electron的简单秒表应用程序，并且不知何故数据更改/手表被延迟，直到另一个UI交互发生（？）这从来没有发生过我使用Bootstrap，我可以确认它不是Electron，这是问题。Angular Material应用程序 - 延迟更改
由于我今天刚开始使用这些，我已经使用了最新版本的AngularJS，Angular Material和Electron，所有这些都与Bower一起使用。
编辑：这里有笔：http://codepen.io/anon/pen/jWgzev
这里的地方：在应用启动：
在按下播放按钮，计时器开始倒计数至零，并播放按钮被取代：
而当计时器降为零，按钮应该已经被橙色停止按钮所取代，但它不会发生：
而当你将鼠标悬停在两个按钮中的一个屏幕方面，灰色按钮神奇地转变为橙色：
如果我张贴的代码块我提前道歉，我只是不知道哪里出了问题。
HTML：
<!doctype html>
<html class="no-js" lang="" ng-app="breaktime-stopwatch">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="styles/normalize.min.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/font-awesome.min.css">
<link href="./bower_components/angular-material/angular-material.css" rel="stylesheet" />
<link rel="stylesheet" href="styles/app.css">
<!--<script src="scripts/vendor/modernizr-2.8.3.min.js"></script>-->
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
</head>
<body ng-controller="AppController as vm" layout="column">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<span>
<h1 class="md-title">Breaktime Stopwatch</h1>
</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button href="" class="md-icon-button">
<md-icon md-font-icon='fa fa-question-circle fa-2x'></md-icon>
<md-tooltip md-direction="left">
About and Help
</md-tooltip>
</md-button>
</div>
</md-toolbar>
<md-content layout="column" layout-padding>
<div flex layout="row" layout-align="center center">
<!--<md-progress-circular md-mode="indeterminate" md-diameter="50"></md-progress-circular>-->
<!--<md-progress-circular md-mode="determinate" ng-value="meter" md-diameter="50"></md-progress-circular>-->
<timer class="clock md-display-4" autostart="false" interval="1000" countdown="break_duration" finish-callback="stopTimer()">{{minutes}}:{{seconds}}</timer>
</div>
<div layout="row" layout-align="center center">
<span ng-if="playButton">
<md-button class="md-fab md-primary" aria-label="Play" ng-click="startTimer()">
<md-icon md-font-icon='fa fa-play fa-2x'></md-icon>
<md-tooltip md-direction="top">
Start
</md-tooltip>
</md-button>
</span>
<span ng-if="stopEarlyButton">
<md-button class="md-fab md-accent" aria-label="Stop Earlier" ng-click="stopEarlyTimer()">
<md-icon md-font-icon='fa fa-stop fa-2x'></md-icon>
<md-tooltip md-direction="top">
Stop
</md-tooltip>
</md-button>
</span>
<span ng-if="stopButton">
<md-button class="md-fab md-warn" aria-label="Stop" ng-click="stopTimer()">
<md-icon md-font-icon='fa fa-exclamation fa-2x'></md-icon>
<md-tooltip md-direction="top">
Stop
</md-tooltip>
</md-button>
</span>
</div>
</md-content>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--pre-dependencies-->
<script src="scripts/plugins.js"></script>
<!--dependencies-->
<script src="./bower_components/jquery/dist/jquery.min.js" type="text/javascript" ></script>
<script src="./bower_components/angular/angular.js" type="text/javascript" ></script>
<script src="./bower_components/angular-animate/angular-animate.js" type="text/javascript" ></script>
<script src="./bower_components/angular-aria/angular-aria.js" type="text/javascript" ></script>
<script src="./bower_components/angular-material/angular-material.js" type="text/javascript" ></script>
<script src="./bower_components/momentjs/min/moment.min.js" type="text/javascript" ></script>
<!--<script src="./bower_components/momentjs/min/locales.min.js" type="text/javascript" ></script>-->
<script src="./bower_components/humanize-duration/humanize-duration.js" type="text/javascript" ></script>
<script src="./bower_components/angular-timer/dist/angular-timer.min.js" type="text/javascript" ></script>
<!--application config-->
<script src="scripts/app.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>-->
</body>
</html>
JS：
(function() {
'use strict';
var btsw = angular.module('breaktime-stopwatch', [
'ngMaterial',
'timer'
]);
btsw.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('indigo')
.accentPalette('grey');
});
btsw.controller('AppController', function AppController($scope, $mdDialog){
$scope.timerRunning = false;
$scope.playButton = true;
$scope.stopEarlyButton = false;
$scope.stopButton = false;
$scope.break_duration = 10;
$scope.break_var = angular.copy($scope.break_duration);
// $scope.meter = 0;
$scope.startTimer = function(){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
$scope.playButton = false;
$scope.stopEarlyButton = true;
};
$scope.stopEarlyTimer = function(){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
$scope.playButton = true;
$scope.stopEarlyButton = false;
};
$scope.stopTimer = function(){
$scope.stopEarlyButton = false;
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
$scope.playButton = false;
$scope.stopEarlyButton = false;
$scope.stopButton = true;
};
$scope.test = function(){
console.log($scope.break_duration);
console.log($scope.break_var);
// console.log($scope.meter);
}
$scope.$on('timer-tick', function (event, data) {
$scope.break_var = data.millis/1000;
// if($scope.meter < Math.round(100-(($scope.break_var/$scope.break_duration)*100)))
// {$scope.meter = Math.round(100-(($scope.break_var/$scope.break_duration)*100));}
// console.log($scope.meter);
});
});
})();
任何形式的帮助，将我指向正确的方向将不胜感激！
如果您可以通过www.codepen.io提供一个最简单的示例，它可以帮助我们更轻松地调试问题。 –
更新我的问题，增加了一支笔。 –