AngularJS：将服务值绑定到指令答案

【问题标题】：AngularJS: Binding a service value to a directiveAngularJS：将服务值绑定到指令
【发布时间】：2015-11-02 17:50:29
【问题描述】：

我是 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>

顺便说一句，我想这不是实现这个想法的最佳方式，所以如果有更好的建议也能解决我的问题，我也很乐意听到。

谢谢！

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-bindings

【解决方案1】：

不要在服务内部创建原始对象，而是创建一个对象，然后将currentTime 属性放入其中。然后您可以在指令中引用该对象。当您将服务变量的引用绑定到指令范围时。服务的变化会改变指令变量的值。

您还需要使用date 过滤器来格式化数据并以时间格式显示它。

标记

<div ng-app="mainApp" ng-controller="testController">
    <clock>{{ model.currentTime | date: 'hh: mm: ss' }}</clock>
</div>

服务

mainApp.service('clockService', function($interval) {
    this.model = {
        currentTime : "Loading..."
    };

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

    $interval(updateTime, 1000);
});

指令

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

Demo Plunkr

【讨论】：

很高兴为您提供帮助..谢谢