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

那是因为你只能从链接功能上的服务获得的价值。然后指令不会看到对此值的更改。您可以在服务价值上设置$ watch，并相应地更新valueRightNow：

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

请参阅此fiddle。

服务不工作的指令，UI上不显示更新的值

1 个答案: