服务无效的指令，更新后的值未显示在 UI

Question

我正在尝试创建一个指令 ('showLatestValue')，它可以在 HTML 中编写如下。

<div ng-app='myApp'>
    <div ng-controller="testController">
        <input type="button" value="Hit It" ng-click="SetIt()" />  
    </div>
   <show-latest-value></show-latest-value>
</div>

该指令将使用一项服务。以下是我正在试验的代码。我不确定为什么单击按钮时没有显示更新的值。

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

myApp.controller('testController',['$scope','latestValueService',function($scope,lvs){
        $scope.SetIt = function(){
            lvs.setValue('Updated Value');
        };
        $scope.firstName = "prerak";
    }]);

myApp.service('latestValueService', [function () {
        var latestValue = 'Init';
        this.setValue = function (newValue) {
            latestValue= newValue;
        }
        this.currentVal = function(){
            return latestValue;
        }
     }]);

myApp.directive('showLatestValue', ['latestValueService',function (lvs) {
        return {
            restrict: 'E',
            template:'<label>This is the current value {{valueRightNow}}</label>',
            link: function (scope, element, attrs) {
                scope.valueRightNow  = lvs.currentVal();
            }
        }
}]);

Answer 1

那是因为您仅在link 函数 上一次从服务中获取值。然后指令将看不到对此值的更改。您可以在服务值上设置 $watch，并相应地更新 valueRightNow：

scope.$watch(function() { return lvs.currentVal(); }, function(newVal) {
    scope.valueRightNow  = newVal;
});

看到这个fiddle。

服务无效的指令，更新后的值未显示在 UI

directive with service not working, updated value is not shown on UI

angularjs

angularjs-directive

angularjs-service