无法运行AngularJS计时器示例

时间:2016-02-02 05:42:01

标签: javascript angularjs angularjs-scope angularjs-ng-repeat

当我尝试运行Angular JS计时器站点中提到的以下示例时,我收到错误:

ng:areq
Bad Argument
Argument 'MyAppController' is not a function, got undefined

http://errors.angularjs.org/1.3.14/ng/areq?p0=MyAppController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at file:///C:/ICDP/Angular/angular/angular.min.js:6:417
    at Sb (file:///C:/ICDP/Angular/angular/angular.min.js:19:510)
    at tb (file:///C:/ICDP/Angular/angular/angular.min.js:20:78)
    at file:///C:/ICDP/Angular/angular/angular.min.js:75:331
    at file:///C:/ICDP/Angular/angular/angular.min.js:57:65
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Example - Multiple Timers Example</title>
    <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
        angular.module('MyApp', ['timer']);
        function MyAppController($scope) {
            $scope.timerRunning = true;

            $scope.startTimer = function (){
                $scope.$broadcast('timer-start');
                $scope.timerRunning = true;
            };

            $scope.stopTimer = function (){
                $scope.$broadcast('timer-stop');
                $scope.timerRunning = false;
            };
        }
        MyAppController.$inject = ['$scope'];
    </script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyAppController">
        <h2>AngularJS - Multiple Timers Example</h2>
        <h3>Timer 1: <timer/></h3>
        <h3>Timer 2: <timer interval="2000"/></h3>
        <h3>Timer 3: <timer> minutes,  seconds.</timer></h3>
        <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
    </div>
</body>
</html>

我有以下两个文件

  <script src="../angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>

http://siddii.github.io/angular-timer/examples.html#/plain-javascript-source

2 个答案:

答案 0 :(得分:1)

您还没有MyAppController 控制器。你必须告诉angular有一个名为MyAppController的控制器。试试这个来解决你的问题。

angular.module('MyApp', ['timer']).controller('MyAppController', MyAppController);

可能有用的链接https://docs.angularjs.org/guide/controller

答案 1 :(得分:1)

打开Chrome开发者工具(F12),然后打开文件夹:angular-timer - &gt;示例 - &gt; angularjs-single-timer.html你会看到(这只是一个小错误):

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Example - Single Timer Example</title>

    <!-- compiled JavaScript -->
    <script type="text/javascript" src="../dist/assets/js/angular-timer-bower.js"></script>
    <script type="text/javascript" src="../dist/assets/js/angular-timer-all.min.js"></script>
    <script>
        angular.module('MyApp', ['timer'])
        .controller('MyAppController', ['$scope', function ($scope) {
            $scope.timerRunning = true;

            $scope.startTimer = function (){
                $scope.$broadcast('timer-start');
                $scope.timerRunning = true;
            };

            $scope.stopTimer = function (){
                $scope.$broadcast('timer-stop');
                $scope.timerRunning = false;
            };

            $scope.$on('timer-stopped', function (event, data){
                console.log('Timer Stopped - data = ', data);
            });
        }]);
    </script>
</head>
<body ng-app="MyApp">
    <div ng-controller="MyAppController">
        <h1>AngularJS - Single Timer Example</h1>
        <h3><timer/></h3>
        <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
    </div>
    <br/>
</body>
</html>