AngularJS：將服務值綁定到指令

我對AngularJS是一種新手，我嘗試製作自己的指令。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>

順便說一句，我想這是不是實現這個想法的最好辦法，所以如果有一個更好的建議這也解決了我的問題，我也很樂意聽到它。

謝謝！

來源

2015-11-02 Matan D

取而代之的內部服務有創建基本對象，做好創建一個對象，然後將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

來源

2015-11-02 17:53:49

謝謝你，夥計，工程，我希望它會:) –

很高興幫助you..Thanks –

AngularJS：將服務值綁定到指令

回答

相關問題