我正在使用 AngularJS + Angular Material + Electron 开发一个简单的秒表应用程序，不知何故，数据更改/手表被延迟，直到发生另一个 UI 交互（？）这在我使用 Bootstrap 时从未发生过，我可以确认问题不是电子。
当我今天开始使用这些时，我使用了最新版本的 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);
});
});
})();
任何可以为我指明正确方向的帮助将不胜感激！