访问另一个控制器的 $scope - AngularJS 中的 ngDialog
Accessing $scope of another controller - ngDialog in AngularJS
我正在实例化 ngDialog
,如下所示;
ngDialog.open({
template: 'mod-details',
className: "ngDialog-theme-large",
showClose: false,
closeByDocument: false,
closeByEscape: false,
controller: ['$scope', function($scope) {
// controller logic
$scope.isValid = true;
$scope.orderItem = orderItem;
$scope.countSelection = function() {
var count = 0;
angular.forEach($scope.modifier.menu_modifier_items, function(item){
count += item.selected ? 1 : 0;
});
console.log(item);
return count;
}
}]
});
然后我将 $scope.orderItem
与 ng-repeat
一起使用,如下所示;
<div ng-repeat="modifier in orderItem.menu_modifier_groups">
<div class="menu--modifiers-group" modifier="modifier">
<div class="group-title" ng-class="{'group-hasError': !isValid}">
<div class="title-s ng-binding" ng-bind="modifier.name"></div>
<div class="clearfix"></div>
<span class="text-muted ptop5" ng-if="modifier.instruction" ng-bind="modifier.instruction"></span>
</div>
<div class="group-items" ng-if="modifier.max_selection_points > 1 || (modifier.max_selection_points == 1 && modifier.min_selection_points == 0)">
<div ng-repeat="item in modifier.menu_modifier_items" class="modifier-item multiple">
<label for="<%modifier.id + '_' + item.id%>" ng-click="modifierClicked(item)">
<input id="<%modifier.id + '_' + item.id%>"
class="checkbox-branded"
type="checkbox"
name="<%item.name%>"
ng-model="item.selected"
ng-class="{'not-available': !item.available}"
title="<%item.name%>"
value="<%item.id%>"
ng-disabled="!item.selected && countSelection() == modifier.max_selection_points"
ng-click="modifierClicked(item)"
ng-change="modifierSelected(item, false)">
<span class="item-name">
<span ng-bind="item.name"></span>
<span ng-bind="priceDelta(modifier, item)"></span>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
我无法在 countSelection
函数
中访问 ng-repeat="modifier in orderItem.menu_modifier_groups"
中的 modifier
或 ng-repeat="item in modifier.menu_modifier_items"
中的 modifier.menu_modifier_items
我附上了 ng-inspector 的屏幕截图。
$scope.modifier 永远不会创建到您的控制器中。您的 countSelection 函数无法知道以这种方式选择了数组的哪一项。你可以做的一种方法是在调用它时将数组的引用传递给你的函数。像这样:
countSelection(modifier.menu_modifier_items);
并且,在控制器上:
$scope.countSelection = function(selection) {
var count = 0;
angular.forEach(selection, function(item){
count += item.selected ? 1 : 0;
console.log(item);
});
return count;
}
我正在实例化 ngDialog
,如下所示;
ngDialog.open({
template: 'mod-details',
className: "ngDialog-theme-large",
showClose: false,
closeByDocument: false,
closeByEscape: false,
controller: ['$scope', function($scope) {
// controller logic
$scope.isValid = true;
$scope.orderItem = orderItem;
$scope.countSelection = function() {
var count = 0;
angular.forEach($scope.modifier.menu_modifier_items, function(item){
count += item.selected ? 1 : 0;
});
console.log(item);
return count;
}
}]
});
然后我将 $scope.orderItem
与 ng-repeat
一起使用,如下所示;
<div ng-repeat="modifier in orderItem.menu_modifier_groups">
<div class="menu--modifiers-group" modifier="modifier">
<div class="group-title" ng-class="{'group-hasError': !isValid}">
<div class="title-s ng-binding" ng-bind="modifier.name"></div>
<div class="clearfix"></div>
<span class="text-muted ptop5" ng-if="modifier.instruction" ng-bind="modifier.instruction"></span>
</div>
<div class="group-items" ng-if="modifier.max_selection_points > 1 || (modifier.max_selection_points == 1 && modifier.min_selection_points == 0)">
<div ng-repeat="item in modifier.menu_modifier_items" class="modifier-item multiple">
<label for="<%modifier.id + '_' + item.id%>" ng-click="modifierClicked(item)">
<input id="<%modifier.id + '_' + item.id%>"
class="checkbox-branded"
type="checkbox"
name="<%item.name%>"
ng-model="item.selected"
ng-class="{'not-available': !item.available}"
title="<%item.name%>"
value="<%item.id%>"
ng-disabled="!item.selected && countSelection() == modifier.max_selection_points"
ng-click="modifierClicked(item)"
ng-change="modifierSelected(item, false)">
<span class="item-name">
<span ng-bind="item.name"></span>
<span ng-bind="priceDelta(modifier, item)"></span>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
我无法在 countSelection
函数
ng-repeat="modifier in orderItem.menu_modifier_groups"
中的 modifier
或 ng-repeat="item in modifier.menu_modifier_items"
中的 modifier.menu_modifier_items
我附上了 ng-inspector 的屏幕截图。
$scope.modifier 永远不会创建到您的控制器中。您的 countSelection 函数无法知道以这种方式选择了数组的哪一项。你可以做的一种方法是在调用它时将数组的引用传递给你的函数。像这样:
countSelection(modifier.menu_modifier_items);
并且,在控制器上:
$scope.countSelection = function(selection) {
var count = 0;
angular.forEach(selection, function(item){
count += item.selected ? 1 : 0;
console.log(item);
});
return count;
}