Question

我正在尝试在AngularJS中创建自定义时钟模块。我试图实现的接口使用标记“＆＃39;。什么都没有呈现，我没有在控制台中收到任何错误。我不确定是什么错误。

的index.html：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Clock in AngularJS</title>
</head>
<body>
    <clock></clock>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.19/angular.min.js"></script>
    <script src="clock.js"></script>
    <script>
        angular.module('myApp', ['clock']);
    </script>
</body>
</html>

clock.js：

'use strict';

angular.module('clock', [])

    .directive('clock', function () {
        return {
            restrict: 'E',
            replace: 'true',
            template: '<div>{{datetime}}</div>',
            controller: ['$scope', '$interval', 'dateFilter', function ($scope, $interval, dateFilter) {
                var format, timer, clock;

                format = 'M/d/yy h:mm:ss a';
                timer = $interval(function () {
                    $scope.datetime = dateFilter(new Date(), format);
                }, 1000);

                clock = {
                    start: timer,
                    pause: $interval.cancel(timer)
                };
            }]
        };
    });

Answer 1

发生这种情况的最可能原因是因为您在html脚本部分中声明了您的模块。

从html中删除

    <script>
        angular.module('myApp', ['clock']);
    </script>

再试一次

这种模块语法声明了一个新模块。要检索现有模块，请使用angular.module('myApp')

Answer 2

作为Chandermani，您必须更改模块声明。您可以使用app.js跟随AnuglarSeed的示例。

此外，它仍然无法正常工作。你必须在这样的函数中初始化你的计时器：

this.start = function() {
    timer = $interval(function () {
        $scope.datetime = dateFilter(new Date(), format);
     }, 1000);
}

this.pause = function() {
    $interval.cancel(timer);
}

另外，在你的指令中添加一个链接函数来调用start函数。

您的指示可以是：

'use strict';

angular.module('myapp', [])

.directive('clock', function () {
    return {
        restrict: 'E',
        replace: 'true',
        template: '<div>{{datetime}}</div>',
        controller: ['$scope', '$interval', 'dateFilter', function ($scope, $interval, dateFilter) {
            var format, timer, clock;
            format = 'M/d/yy h:mm:ss a';

            this.start = function() {
              timer = $interval(function () {
                $scope.datetime = dateFilter(new Date(), format);
              }, 1000);
            }

            this.pause = function() {
              $interval.cancel(timer);
            }
        }],
        link: function(scope, element, attrs, ctrl) {
          ctrl.start();
        }
    };
});

我为完整的解决方案创建了一个plunker： http://plnkr.co/edit/wjfAogybFvoxIYnQVJgg?p=preview

AngularJS中带/ Controller的自定义指令

2 个答案: