javascript - 无法运行 AngularJS 计时器示例

标签 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

最佳答案

打开 Chrome 开发者工具(F12),然后打开包含以下文件的文件夹: angular-timer -> Examples -> 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>

关于javascript - 无法运行 AngularJS 计时器示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35145889/

相关文章:

javascript - 未捕获的类型错误 : Cannot read property 'x' of undefined common. js

javascript - 优化.click(某些函数)jquery代码

java - 加载包含生成的 HTML 的 HTML 页面

javascript - 从 angularjs 服务更改下拉列表的选定值

angularjs - 在 AngularJS 中保存 View 的状态

javascript - 如何重复onclick事件?

javascript - css文件中的CSS直接插入到html文件中

angularjs - 引导一个 Angular 2 应用程序,与一个已经加载的 Angularjs 应用程序并排

angularjs - 从 angularjs 工厂后端获取空模型并在成功后更新 Controller 变量

javascript - 将工厂服务的结果应用到范围 Controller