2017-10-13 110 views
0

我正在使用自定义标签女巫控制器包含最大值,这是针对表示百分比的单杠。如何从视图初始化控制器变量? (Angular JS)

由于动态定义的水平条的最大值,我需要直接在视图上设置它,所以当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中的范围,我可以看到最大值设置正确。

感谢

+0

我想'ng-init =“hValues.maxValue = specialItem.itemTotal”'设置$ scope.hValues.maxValue的值不是$ rootScope.hValues.maxValue – foxinatardis

+0

所以我需要指定它像' $ rootScope.hValues.maxValue = specialItem.itemTotal'? –

+0

就个人而言,我会尽可能避免使用$ rootScope,但如果需要的话,在指定'$ rootScope.hValues = {};'后,我会在控制器中添加一行,例如'$ scope.hValues = $ rootScope.hValues;'方式您的本地作用域有一个参考它正在尝试使用的根作用域。 – foxinatardis

回答

0

使用插件检查在Firefox的范围,我可以看到,最高值是否设置正确。