Question

我有这个指令：

import 'jquery';
import 'jquery-ui/ui/widgets/slider';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/slider.css';
import 'jquery-ui/themes/base/theme.css';
import './range.css';

function range() {
    return {
        restrict: 'E',
        scope: {
            min: '@',
            max: '@',
            startLabel: '&',
            endLabel: '&',
            showLabels: '@'
        },
        require: 'ngModel',
        template: '<div><div>{{showLabels}}</div><div class="range" ng-class="{labels: showLabels}"></div></div>',
        link: function($scope, $element, $attrs, ngModelController) {
            var $range = $($element).find('.range');
            $scope.min = $scope.min || 0;
            $scope.max = $scope.max || 100;

            function updateCustomProperties(range) {
                $range[0].style.setProperty("--from", (range[0] / $scope.max) * 100);
                $range[0].style.setProperty("--to", (range[1] / $scope.max) * 100);
            }

            if (!ngModelController.$modelValue) {
                ngModelController.$modelValue = [$scope.min, $scope.max]
            }
            $scope.$watch('startLabel', function(value) {
                $range.find('.ui-slider-handle').eq(0).attr('data-value', value);
            });
            $scope.$watch('endLabel', function(value) {
                $range.find('.ui-slider-handle').eq(1).attr('data-value', value);
            });
            $range.slider({
                min: $scope.min,
                max: $scope.max,
                step: 1,
                values: ngModelController.$modelValue,
                slide: function(event, ui) {
                    function updateModel() {
                        ngModelController.$setViewValue(ui.values);
                    }
                    if (!$scope.$$phase) {
                        $scope.$apply(updateModel);
                    } else {
                        updateModel();
                    }
                    updateCustomProperties(ui.values);
                }
            });
            updateCustomProperties(ngModelController.$modelValue);
            $scope.$watch('min', function(value) {
                $range.slider('option', 'min', value);
            });
            $scope.$watch('max', function(value, oldValue) {
                $range.slider('option', 'max', value);
                updateCustomProperties(ngModelController.$modelValue);
            });
            ngModelController.$render = function() {
                if (ngModelController.$modelValue) {
                    $range.slider('option', 'values', ngModelController.$modelValue);
                    updateCustomProperties(ngModelController.$modelValue);
                }
            };
        }
    };
}
//range.$inject = [];


module.exports = range;

这个用法：

    <range start-label="vm.monthYear(vm.DashboardService.fromDate)"
           end-label="vm.monthYear(vm.DashboardService.toDate)"
           show-labels="{{vm.MonthDiff(vm.DashboardService.fromDate, vm.DashboardService.toDate) > 2}}"
           max="{{vm.range.max}}"
           class="slider" ng-model="vm.range.values"></range>

当show-labels的值变为false时，我得到指令模板中的值（{{showLabels}}为false）但是类没有被删除，当我在开发人员工具中检查它时，它总是在DOM元素上。

为什么要删除课程？

Answer 1

未解析插值，它是修复它的字符串，您可以在插值上调用JSON.parse：

function range() {
    return {
        restrict: 'E',
        scope: {
            min: '@',
            max: '@',
            startLabel: '&',
            endLabel: '&',
            showLabels: '@'
        },
        require: 'ngModel',
        template: '<div class="range" ng-class="{labels: labels}"></div>',
        link: function($scope, $element, $attrs, ngModelController) {
            var $range = $($element).find('.range');
            $scope.min = $scope.min || 0;
            $scope.max = $scope.max || 100;
            $scope.$watch('showLabels', (value) => {
                $scope.labels = JSON.parse(value);
            });
            ...
        }
    };
}

即使内插值更改为false，ng-class也不会更新

1 个答案: