Angular Directive 格式化程序/渲染器不更新答案

【问题标题】：Angular Directive formatter/render does not updateAngular Directive 格式化程序/渲染器不更新
【发布时间】：2015-02-17 15:18:45
【问题描述】：

我写了一个非常简单的directive 转分钟进入范围滑块，并在其旁边显示小时和分钟。问题是移动范围滑块确实会更新范围，所以 Watch and Parser 被调用，但是 Formatters/Render 永远不会被再次调用。

所以我的分钟确实会更新并传播到更改模型，但指令的“内部”小时和分钟永远不会更新。

仅当我从外部对 ng-model 值进行更改时。

我不确定发生了什么，因为类似的指令都按预期工作。 :s

// Here is a shortened version
angular.module('TestApp', ['TestDirectives']);

angular
.module('TestDirectives', [])
.directive("rangeMinutes", [function RangeMinutesDirective () {
    return {
        require: 'ngModel',
        replace: true,
        scope: true,
        templateUrl: 'minutesHoursRange.html',
        link: function (scope, element, attributes, ngModelCtrl) {

            ngModelCtrl.$formatters.push(function (modelValue) {
                var totalMinutes = (modelValue ? modelValue : 0);
                return {
                    totalMinutes : totalMinutes,
                    hours : Math.floor(totalMinutes/60),
                    minutes : parseInt(totalMinutes%60, 10)
                };
            });

            ngModelCtrl.$render = function () {
                if (!ngModelCtrl.$viewValue) {
                    ngModelCtrl.$viewValue = {
                        hours: 0, minutes: 0, totalMinutes: 0
                    };
                }
                scope.totalMinutes = ngModelCtrl.$viewValue.totalMinutes;
                scope.hours = Math.floor(scope.totalMinutes/60);
                scope.minutes = parseInt(scope.totalMinutes%60, 10);
            };

            scope.$watch('totalMinutes', function () {
                ngModelCtrl.$setViewValue({
                  totalMinutes: scope.totalMinutes,
                  hours: scope.hours,
                  minutes: scope.minutes
                });
            });

            ngModelCtrl.$parsers.push(function (viewValue) {
                return parseInt(viewValue.totalMinutes, 10);
            });
        }
    };
}])
.controller("TestController", ["$scope", function ($scope) {
  $scope.testObject = { testValue: 40 };
}]);

指令的模板：

<div class="form-inline minutesHoursRange">
    <div class="form-group">
        <label>
            <input type="range" min="0" max="100" step="1" class="form-control"
               data-ng-model="totalMinutes"/> {{hours}} hrs {{minutes}} mns
        </label>
    </div>
</div>

查看：

<body data-ng-app="TestApp" data-ng-controller="TestController">
    <div data-ng-model="testObject.testValue" data-range-minutes></div>
</body>

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

您在totalMinutes 属性上没有$watch，只需添加：

scope.$watch('totalMinutes', function domToViewValue () {
        scope.hours = Math.floor(scope.totalMinutes/60),
        scope.minutes = parseInt(scope.totalMinutes%60, 10);
});

一切正常。

Working Plunker.

【讨论】：

我明白了，所以范围从未更新，只有视图，据我了解，这与以前相同。谢谢！！ :) 更新：所以澄清一下，我确实有手表，问题是它只是用 DOM 中的任何内容设置 viewValue（如我所见），并且由于用户需要更改小时/分钟，所以它是从不真正更新这些值。