2

私は AngularJS に慣れていないので、独自のディレクティブを作成しようとしました。

私の目標は、一般的なサービスからデータを取得する「クロック」ディレクティブを作成することです。問題は、現在の時刻の値をサービスからディレクティブ (および実際にはビュー) にバインドできなかったことです。新しい値 (時間) に更新されるのではなく、最初の値 (「読み込み中」) が画面に残ります。これは私のコードです：

Javascript:

var mainApp = angular.module("mainApp", []);

// The service
mainApp.service('clockService', function($interval) {
    this.currentTime = "Loading...";

    function updateTime() {
        this.currentTime = Date.now();
    }

    $interval(updateTime, 1000);
});

// The directive
mainApp.directive('clock', function (clockService) {
    return {
        restrict: 'E',
        link: function (scope) {
            scope.model = clockService.currentTime;
        }
    };
});

mainApp.controller('testController', function($scope) {
});

HTML:

<body>
   <h2>AngularJS Sample Application</h2>

   <div ng-app="mainApp" ng-controller="testController">
        <clock>{{ model }}</clock>
   </div>

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

</body>

ところで、これはこのアイデアを実装するための最良の方法ではないと思うので、私の問題も解決するより良い提案があれば、それについて聞いてうれしいです.

ありがとう！

4

1 に答える 1