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のスコープを確認すると、最大値が正しく設定されていることがわかります。 Firefoxでのスコープを確認するためのプラグインを使用して
おかげ
私は 'ng-init =" hValues.maxValue = specialItem.itemTotal "は$ scope.hValues.maxValueの値を$ rootScope.hValues.maxValueに設定していないと思います。 – foxinatardis
これは' $ rootScope.hValues.maxValue = specialItem.itemTotal'? –
私は可能な限り$ rootScopeを使用しませんが、ここで必要なら '$ rootScope.hValues = {};'を指定した後、 '$ scope.hValues = $ rootScope.hValues;'のような行をコントローラに追加しますあなたのローカルスコープは、それが動作しようとしているルートスコープへの参照を持っています。 – foxinatardis