绑定来自 Angular 指令的子元素值

Question

Binding values with $scope.minutes = 1 to ng-bind="minutes" not working when I add scope: {finishcallback: "&"}, to my directive.

我正在尝试使用 Angular 指令实现倒数计时器，但是当我在指令中定义范围函数时，无法将剩余分钟和秒的值设置到子 span 元素。

<time id="countdown_{{order.Id}}" ng-if="order.StatusCode == 1" countdown="{{order.RemainingTimeToPrepareOrder}}" finishcallback="vm.countdownfinished(parameter)" callbackparameter="{{order.Id}}" countdownfinished="toggle()">                                        
  <b> <span class="value" ng-bind="minutes"></span>  dakika   <span class="value" ng-bind="seconds">--</span> saniye</b>
</time>

这是我的指令代码。

function countdown() {
    return {
        restrict: 'A', 
        scope: {
            finishcallback: "&"
        },
        controller: function ($scope, $attrs, $timeout) {

            $attrs.$observe('countdown', function (value) {
                var ds = new Date();
                ds.setTime(value * 1000);

                $scope.days = '-';
                $scope.hours = $scope.minutes = $scope.seconds = '--';

                $scope.timeout = $timeout(update, 1000);

                function update() {
                    now = +new Date();

                    $scope.delta = Math.round((ds - now) / 1000);
                    if ($scope.delta >= 0) {
                        $timeout(update, 1000);
                    } else if ($attrs.countdownfinished) {
                        $scope.$apply($attrs.countdownfinished);
                    }
                }
            });
        },
        link: function ($scope, $element, $attrs) {
            $scope.$watch('delta', function (delta) {
                if (typeof delta === 'undefined') return;

                if (delta < 0) {
                    delta = 0;
                }

                $scope.days = Math.floor(delta / 86400);
                $scope.hours = forceTwoDigits(Math.floor(delta / 3600) % 24);
                $scope.minutes = forceTwoDigits(Math.floor(delta / 60) % 60);
                $scope.seconds = forceTwoDigits(delta % 60);
            });
            $scope.toggle = function () {
                $scope.finishcallback({ parameter: $attrs.callbackparameter });
            }
            function forceTwoDigits(num) {
                return String(num < 10 ? '0' + num : num);
            }

        }
    }
}

在我的指令中添加 finishcallback: "&" 范围变量之前，所有功能都在工作。我添加这个是为了在倒计时结束时启用自定义函数调用。但是当我添加这个时，我的作业 $scope.minutes 停止更改我的跨度中的值。

即使在我的指令中定义了一个范围，我如何动态更改跨度值？

Answer 1

我建议只使用模板：

function countdown($timeout) {
  return {
    restrict: 'A',
    scope: {
      finishcallback: "&"
    },
    template: `<b> <span class="value" ng-bind="minutes"></span>  dakika   <span class="value" ng-bind="seconds">--</span> saniye</b>`,
    controller: function($scope, $attrs) {

      $attrs.$observe('countdown', function(value) {
        var ds = new Date();
        ds.setTime(value * 1000);

        $scope.days = '-';
        $scope.hours = $scope.minutes = $scope.seconds = '--';

        $scope.timeout = $timeout(update, 1000);

        function update() {
          now = +new Date();

          $scope.delta = Math.round((ds - now) / 1000);
          if ($scope.delta >= 0) {
            $timeout(update, 1000);
          } else if ($attrs.countdownfinished) {
            $scope.$apply($attrs.countdownfinished);
          }
        }
      });
    },
    link: function($scope, $element, $attrs) {
      $scope.$watch('delta', function(delta) {
        if (typeof delta === 'undefined') return;

        if (delta < 0) {
          delta = 0;
        }

        $scope.days = Math.floor(delta / 86400);
        $scope.hours = forceTwoDigits(Math.floor(delta / 3600) % 24);
        $scope.minutes = forceTwoDigits(Math.floor(delta / 60) % 60);
        $scope.seconds = forceTwoDigits(delta % 60);
      });
      $scope.toggle = function() {
        $scope.finishcallback({
          parameter: $attrs.callbackparameter
        });
      }

      function forceTwoDigits(num) {
        return String(num < 10 ? '0' + num : num);
      }

    }
  }
}

angular.module('app', [])
  .controller('ctrl', function($scope, $interval) {
    $scope.order = {
      Id: 1,
      StatusCode: 1,
      RemainingTimeToPrepareOrder: Date.now() + 5 * 60 * 1000,
    };
    $scope.countdownfinished = function(parameter) {
      console.log(parameter);
    }
    $scope.toggle = function() {
      console.log("Toggle");
    }

    $interval(function() {
      $scope.order.RemainingTimeToPrepareOrder -= 1000;
    }, 1000);
  })
  .directive('countdown', countdown);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <time id="countdown_{{order.Id}}" ng-if="order.StatusCode == 1" countdown="{{order.RemainingTimeToPrepareOrder}}" finishcallback="countdownfinished(parameter)" callbackparameter="{{order.Id}}" countdownfinished="toggle()"> 
</time>
</div>

绑定来自 Angular 指令的子元素值

Binding child element value from Angular directive

javascript

angularjs

angularjs-directive

angularjs-scope