Question

我创建了一个自定义指令。它是一个进度条，放在两个不同的html中。加载一个页面时，条形图是正确的，当我转到另一个页面时，条形图开始移动，从最后一个尺寸移动到新尺寸。

这是我的指示

angular.module('myApp').directive('meterBar', function () {
    return {
        restrict: 'A',
        templateUrl: 'inc/tools/meterbar.html',
        controller: 'meterbarController',
        scope: {
            statusInFrom: '@',
            statusInTo: '@',
            total: '@',
            bar: '@'
        }
    };
});

我在第1页中有这段代码

<div id="bar" meter-bar status-in-from="A100" status-in-to="A450" total="97" bar="1"></div>

第2页中的此代码

<div id="bar" meter-bar status-in-from="A450" status-in-to="A950" total="150" bar="1"></div>

这是我的控制器

angular.module('myApp').controller('meterbarController',
    ['$scope', '$interval', 'WebApiFactory', 'GeneralWebApiFactory', 'constants',
        function ($scope, $interval, WebApiFactory, GeneralWebApiFactory, constants) {
            var statusInFlow = '';
            var total = 0;
            var inFlowCount = 0;
            var porcentage = 0;
            $scope.model = 0;
            $scope.meterbar = {};

            $interval(function () {
            statusInFlow = getStatus($scope.statusInFrom, $scope.statusInTo);
            console.log(statusInFlow)
            total = $scope.total;

            WebApiFactory.counterCurrentStatus('All', statusInFlow).then(function (data) {
                inFlowCount = 0;
                for (var count in data) {
                    inFlowCount += data[count];
                }
            }).then(function () {
                GeneralWebApiFactory.getConfigurationRange(constants.ASSEMBLY).then(function (data) {
                    var ranges = data.range;
                    porcentage = Math.round((inFlowCount * 100) / total );
                    for (var i = 0; i < ranges.length; i++) {
                        if (porcentage >= ranges[i].from && porcentage <= ranges[i].to) {
                            $scope.meterbar.porcentage = porcentage + '%';
                            $scope.meterbar.class = ranges[i].text;
                            $('.meterbar').css('background', constants.COLORS[ranges[i].text]);

                            console.log('porcentage ' + porcentage);
                            $('.meterbar').css('width', porcentage + 1 + '%');
                            $('.metertxt').css('left', porcentage + '%');
                        }
                    }
                });
            });
            }, 2000, 0, true);

            function getStatus(from, to) {
                var status = '';
                var fromIndex = 0;
                var toIndex = 0;

                for (var i = 0; i < constants.STATUS.length; i++) {
                    if (from === constants.STATUS[i]) {
                        fromIndex = i;
                    }

                    if (to === constants.STATUS[i]) {
                        toIndex = i;
                    }
                }

                if (toIndex === 0) {
                    toIndex = constants.STATUS.length;
                } else {
                    toIndex++;
                }

                status = constants.STATUS.slice(fromIndex, toIndex).toString();
                return status;
            }
        }]);

<div>

Heres是我的模板。

<p class="metertxt fnt_osbold fnt_small">
    <span class="dis_block">{{meterbar.porcentage}}</span>
    &#9660;
</p>
<div class="meter">
    <div class="meterbar"></div>
</div>
<div class="alg_center">
    <p class="fnt_osbold">Circulation {{statusInFrom}}-{{statusInTo}}</p>
</div>

我无法发布图片来澄清问题。试着解释一下，指令上的控制器做一些计算得到％，这个％表示在进度条中。我使用指令来表示进度条，当我看到第1页时，进度条正确显示了百分比和进度条。然后我转到第2页，它也有相同的指令，它计算百分比，但是当在页面中绘制进度条时，首先绘制第1页的前一个百分比，然后再绘制实际的percantage，然后再次绘制前一个和实际，并不断重复，而不是只显示它的当前值。

Angular中的指令

0 个答案: