如何从视图中初始化一个控制器变量? (Angular JS)

时间:2017-10-13 14:04:42

标签: javascript angularjs

我正在使用自定义标签女巫控制器包含一个最大值,这是一个重复百分比的水平条。

由于水平条的最大值是动态定义的,我需要直接在视图上设置它,所以当ng-repeat开始时,它会设置最大的错误值。

目前我喜欢这个(视图):

<div class="scroll">
        <table class="tbody">
            <tr ng-repeat="specialItem in specialItems">
                <td class="tcellsmall alg_justify" title="{{specialItem.label | translate}}">
                    <label class='{{specialItem.class}}' ng-click="openLightbox(specialItem)">{{specialItem.label | translate}}</label>
                </td>
                <td class="tcell" ng-repeat="area in areas">
                    <span ng-if="specialItem[area] > 0">{{specialItem[area]}}</span>
                    <horizontal-bar type="{{item}}" value="{{specialItem[area]}}" ng-init="hValues.maxValue = specialItem.itemTotal " ng-if="specialItem[area] > 0" ng-cloak ng-click="clickMeter(area, specialItem.type, specialItem.custom)" area="{{area}}"/>

                </td>
                <td class="tcellsmall alg_right" ng-click="clickMeter('Plant', specialItem.type, specialItem.custom)">
                    <label class="cur_pointer">{{specialItem.itemTotal}}</label>
                </td>
            </tr>
        </table>
    </div>

我的控制器是:

app.directive('horizontalBar', function () {
return {
    restrict: 'E',
    scope: {
        type: '@',
        value: '@',
        barColor: '@',
        threshold: '@', // only used by the Restriktionsverfolgung page
        area: '@'
    },
    templateUrl: 'views/tools/horizontalBar/horizontalBar.html',
    replace: true,
    controller: ['$scope', '$rootScope', function ($scope, $rootScope) {

        $rootScope.hValues = {};
        var min = 0;
        $rootScope.hValues.maxValue = 0;
        var max = $rootScope.hValues.maxValue;
        // var max = 300;
        var ranges = new AssemblyLive.Models.RangeCollection();

        // Init component
        $scope.valuePercent = 0;

        if ($scope.value !== undefined) {
            $scope.$watchCollection('value', function (newValue) {
                $scope.SetValue($scope.value);
            });
        }

        // If data is found in the Config file, load it
        if (Config.Areas[$scope.type] !== undefined) {
            min = Config.Areas[$scope.type].minimum;
            max = Config.Areas[$scope.type].maximum;
            if (Config.Areas[$scope.type].ranges !== undefined) {
                for (var u in Config.Areas[$scope.type].ranges)
                    ranges.Add(new AssemblyLive.Models.Range(parseFloat(Config.Areas[$scope.type].ranges[u].from), parseFloat(Config.Areas[$scope.type].ranges[u].to), Config.Areas[$scope.type].ranges[u].style));
            }
        }

        //Functions
        $scope.SetColor = function (color) {
            $scope.backgroundColor = color;
        };

        $scope.SetValue = function (value) {    
            value = Math.round(value);

            if (value <= min) value = min;
            if (value >= max) value = max;

            $scope.valuePercent = value / max * 100;
            $scope.color = ranges.getValue($scope.valuePercent);
            // Only for the Restriktionsverfolgung page
            if ($scope.threshold !== undefined) {
                if ($scope.valuePercent >= Number($scope.threshold))
                    $scope.color = "div_error";
                else if ($scope.valuePercent >= Number($scope.threshold - 2))
                    $scope.color = "div_warning";
                else 
                    $scope.color = "div_success";
            } else if (Utils.isEmpty($scope.color)) {
                if (!Utils.isEmpty($scope.barColor)) {
                    $scope.color = $scope.barColor;
                } else {
                    $scope.color = "grayfill";
                }
            } else {
                $scope.color = $scope.barColor;
            }

        };

        // Meter was clicked
        $scope.clickMeter = function () {
            if ($scope.type !== '') {
                if (Config.Areas[$scope.type] !== undefined && Config.Areas[$scope.type].onClickURL !== undefined) {
                    window.location.href = Config.Areas[$scope.type].onClickURL;
                }
            }
        };
    }],
    controllerAs: 'hmCtrl',
    link: function ($scope, element, attrs) {

    }
};

});

正如您在代码中看到的那样,我已经准备好了我的$ rootScope变量来设置视图上的值,但它不起作用。

你知道为什么吗?

---- ----更新 使用插件检查firefox中的范围,我可以看到最大值已正确设置。

由于

1 个答案:

答案 0 :(得分:0)

使用插件检查firefox中的范围,我可以看到最大值已正确设置。