这非常令人困惑..这是一个小提琴手JSFiddler Example
Angular.copy适用于此示例但使用热毛巾datacontext.lookup.setLookups（true）方法导致（RangeError：超出最大调用堆栈大小）。知道为什么吗？
从列表中选择U3，然后单击“添加”。 U3从选择列表（下拉列表）中删除并添加到选定列表中。 U3已从其他下拉列表中删除。
所以它在全球范围内共享我的“单位”列表，以及我的真实项目中的一些内容。
如何将列表复制到特定控制器实例的包含范围内？
我正在使用带有breeze.js的HotTowel.Angular模板。我想知道是否正在共享对缓存查找值的引用。以下是实际获取单位列表数据的方法。
<!-- the actual item detail controller -->
(function () {
'use strict';
var controllerId = 'itemdetail';
angular.module('app').controller(controllerId,
['common', 'datacontext', itemdetail]);
function itemdetail(common, datacontext) {
var vm = this;
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
vm.units = [];
vm.selectedUnit = undefined;
vm.selectedUnits = [];
activate();
function activate() {
common.activateController([initLookupValues()], controllerId)
.then(function () {
// log('Activated Controller' + controllerId,controllerId,true);
});
}
function initLookupValues() {
vm.units = datacontext.lookup.refreshUnitLookupCachedData(true);
}
}
})();
<!-- FROM repository.lookup.js ---->
function refreshUnitLookupCachedData(includeNullo) {
var predicate = breeze.Predicate.create('isLookUpValue', '==', true);
if (includeNullo) {
predicate = predicate.or(this._predicates.isNullo);
}
return this.lookupCachedData.units = this._getAllLocal(entityNames.unit, 'displayOrder', predicate);
}
<!-- FROM repository.abstract.js -->
function _getAllLocal(resource, ordering, predicate) {
return EntityQuery.from(resource)
.orderBy(ordering)
.where(predicate)
.using(this.manager)
.executeLocally();
}
我有一个指令将对象列表绑定到选择下拉框。然后，当用户进行选择时，他们单击添加按钮，该项目将从选择列表中删除并添加到“选定”列表中。用户可以从选定列表中删除它，并将其放回选择列表中。
使用ng-repeat为每个需要这些值的对象呈现此select指令。 ng-repeat中的每个项目都有自己的另一个控制器实例。
因此，如果ng-repeat有10个对象呈现，则其中10个下拉列表将与其他输入控件一起呈现。
如果我在第一个下拉列表中选择一个项目并将其添加到所选列表中。页面上的每个下拉列表都会更改（项目从下拉列表中删除并添加到选择列表中）。即使每个呈现的下拉列表都应该与该ng-repeat项目的特定控制器相关。
我做的范围有问题，但没有想法。
<section id="admin-view" class="mainbar" data-ng-controller="myItemController as i">
<section class="matter">
<div class="container">
<div class="row">
<div id="itemFilter" >
<div data-dc-item-filter
items="i.itemPartials"
selected-item="i.selectedItem"
item-filter-text="i.itemSearch"
filtered-items="i.filteredItemPartials"
use-drop-down="false">
</div>
</div>
</div>
<div class="row"
ng-repeat="itemPartial in i.filteredItemPartials"
data-ng-controller="itemdetail as vm" >
<div class="widget>
<div data-cc-widget-header title="{{itemPartial.name}}"
allow-collapse="true"
is-widget-expanded="vm.isWidgetExpanded"></div>
<div class="widget-content collapse">
<div class="row" data-ng-click="$event.stopPropagation();">
<div id="solids" class="col-sm-8 col-md-7 col-lg-4">
<div class="widget">
<div data-cc-widget-header
title="Solid Options" nested-header="true"
allow-collapse="true"
is-widget-expanded="vm.isWidgetExpanded"></div>
<div class="row widget-content">
<div class="col-sm-4 col-md-4 col-lg-4">
<div data-dc-lookup-dropdown
title="Items:"
items="vm.myList"
selected-item="vm.selectedItem"
selected-items="vm.selectedItems">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
这是我的指令模板html和控制器
<select class="form-control"
data-ng-options="(item.acronym !== undefined ? item.acronym : item.name) for item in items | filter:{selected: false}"
data-ng-model="selectedItem"
data-ng-disabled="disableSelect"
data-ng-change="onChange(item)"
ng-init="selectedItem = items[0]"></select>
<span class="input-group-btn">
<button class=" btn btn-info blue-tooltip"
data-ng-disabled="disableAddButton"
data-ng-click="addSelectedItem()">
<span class=" fa fa-plus"></span>
</button>
</span>
app.directive('dcLookupDropdown', [function () {
//Usage:
//<div data-dc-lookup-dropdown
// title="Units:"
// items="vm.mylist"
// selected-item="vm.selectedItem"
// selected-items="vm.selectedItems">
//</div>
var directive = {
controller: ['$scope', lookupDropDownController]
,scope: {
"title":"@"
,"items": "="
,"selectedItem": "="
,"selectedItems": "="
}
,restrict: 'A'
,replace: true
,templateUrl: 'app/templates/dc-lookupDropDown-template.html'
};
return directive;
function lookupDropDownController($scope) {
$scope.addSelectedItem = addSelectedItem;
$scope.removeSelectedItem = removeSelectedItem;
$scope.onChange = onChange;
$scope.disableAddButton = true;
$scope.disableSelect = false;
activate();
function activate() { }
function addSelectedItem() {
$scope.selectedItems.push($scope.selectedItem);
_disableOption($scope.items, $scope.selectedItem);
//sets dropdown back to nullo object
$scope.selectedItem = $scope.items[0];
$scope.disableAddButton = shouldDisableAddButton();
$scope.disableSelect = shouldDisableSelect();
}
function onChange(item) {
$scope.disableAddButton = shouldDisableAddButton();
}
function shouldDisableAddButton() {
return ($scope.selectedItem.id == 0);
}
function shouldDisableSelect() {
return ($scope.selectedItems.length == $scope.items.length - 1);
}
function removeSelectedItem(item) {
$scope.selectedItem = item;
for (var idx = $scope.selectedItems.length; idx--;) {
if ($scope.selectedItems[idx].id == item.id) {
$scope.selectedItems.splice(idx, 1);
}
}
_enableOption($scope.items, $scope.selectedItem);
//sets dropdown back to nullo object
$scope.selectedItem = $scope.items[0];
$scope.disableAddButton = shouldDisableAddButton();
$scope.disableSelect = shouldDisableSelect();
}
function _disableOption(itemList, selectedItem) {
if (selectedItem !== null) {
angular.forEach(itemList, function (item) {
if (item.id == selectedItem.id) {
item.selected = true;
return item;
}
return selectedItem;
}, selectedItem);
};
};
function _enableOption(itemList, selectedItem) {
if (selectedItem !== null) {
var foundItem = angular.forEach(itemList, function (item) {
if (item.id == selectedItem.id) {
item.selected = false;
return item;
}
return selectedItem;
}, selectedItem);
};
};
}
}]);