Question

我正在使用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);
        });

    });
})();

非常感谢任何能帮助我指明正确方向的帮助！

Answer 1

在没有深入研究计时器代码的情况下，我猜测它提供的finish-callback功能可能在摘要循环结束时运行，或者完全在Angular的摘要之外运行循环（因为它是一个Angular模块，所以有点奇怪）。

如果是这种情况，只需将$scope.$digest();添加到$scope.stopTimer()函数的末尾即可。

这是一个更新的Codepen，按预期工作：http://codepen.io/topherfangio/pen/bEXXNj

编辑：作为旁注：在悬停按钮后，它会在您的Codepen中发生变化，因为工具提示正在触发摘要周期。

Angular Material应用程序 - 延迟更改

1 个答案: