我是 AngularJS 的新手，我尝试制定自己的指令。
我的目标是创建一个“时钟”指令，它从通用服务中获取数据。问题是我没有成功地将当前时间的值从服务绑定(bind)到指令(实际上是 View )。第一个值(“正在加载”)保留在屏幕上，而不是更新为新值(时间)。 这是我的代码:
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>
顺便说一句，我想这不是实现这个想法的最佳方式，所以如果有更好的建议也能解决我的问题，我也很乐意听到。
谢谢!
最佳答案
不是在服务内部创建原始对象，而是创建一个对象，然后在其中放置 currentTime 属性。然后您可以在指令中引用该对象。当您将服务变量的引用绑定(bind)到指令范围时。服务的变化会改变指令变量的值。
您还需要使用 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;
}
};
});
关于javascript - AngularJS:将服务值绑定(bind)到指令，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33483789/