我正在尝试创建 angular 指令，它是 ui-select 指令之上的包装器。我的目标是为指令提供一个包含项目的列表和一个模型，该模型将与所选项目的特定属性同步。我的指令有 5 个属性：
ng-model - 指定模型， items - 指定项目列表， display-prop - 将在 ui-select 中用于显示目的的属性名称， value-prop - 将用于模型分配的属性名称， multiple [可选] - 如果允许多选
在指令子范围中，我有与 ui-select ng-model 同步的对象，当它发生更改时，我正在更新主范围。
当您从空选择开始时，我设法使这些东西适用于单个选定项目和多个项目。However I still have a problem to display the initial selected items when a multiple selection is chosen. 我认为问题出在我的指令和 ui-select 指令之间的范围和 $watch 方法上。在数组的情况下，我的指令范围内的更新似乎不会影响 ui-select ng-model。
我创建了一个包含指令和测试用例的简单应用程序的Plunker，您可以在其中看到单个选择正常工作，但是当我有一个数组时，列表未初始化。
angular.module('dgUi', ['ui.select', 'ngSanitize'])
.config(['uiSelectConfig', function(uiSelectConfig){
uiSelectConfig.theme = 'select2';
}])
.controller('UiSelectWrapperConttoller', ['$scope', function($scope){
$scope.userAddresses = [
{
address: 'Address 1',
description: 'Home address'
},
{
address: 'Address 2',
description: 'Office address'
},
{
address: 'Address 3',
description: 'Test address 3'
},
{
address: 'Address 4',
description: 'Test address 4'
}
];
$scope.currentUser = {
name: 'User 1',
address: 'Address 1'
};
$scope.currentUser = {
name: 'User 1',
address: 'Address 2',
availableAddresses:['Address 3']
};
}])
.directive('dgSelect', ['$parse', function ($parse) {
return {
restrict: 'AE',
require: ['ngModel'],
scope: true,
templateUrl: function(tElement, tAttrs) {
return '/global/dg-ui/dg-select' + ((angular.isDefined(tAttrs.multiple) ? '-multi' : '') + '.tpl.html');
},
compile: function (tElement, tAttrs) {
var displayPropSufix = tAttrs.displayProp ? '.' + tAttrs.displayProp : '';
var isMultiple = angular.isDefined(tAttrs.multiple) ;
//match element config
if (tAttrs.placeholder) {
$('ui-select-match, *[ui-select-match]', tElement).attr('placeholder', tAttrs.placeholder);
}
if(isMultiple){
$('ui-select-match, *[ui-select-match]', tElement).html('{{$item' + displayPropSufix + '}}');
}else{
$('ui-select-match, *[ui-select-match]', tElement).html('{{$select.selected' + displayPropSufix + '}}');
}
//choices element config
$('ui-select-choices, *[ui-select-choices]', tElement).attr('repeat', 'listItem in ' + tAttrs.items + ' | filter:$select.search')
$('ui-select-choices, *[ui-select-choices]', tElement).html('<div ng-bind-html="listItem' + displayPropSufix + ' | highlight: $select.search"></div>');
return function link(scope, element, attrs, ctrls) {
scope.ngModel = ctrls[0];
scope.isMultiple = angular.isDefined(attrs.multiple)
scope.itemsGetter = $parse(attrs.items);
if(angular.isDefined(attrs.valueProp) && attrs.valueProp !== ''){
scope.valuePropGetter = $parse(attrs.valueProp);
}
scope.getValueMapper = function(itemObject){
return scope.valuePropGetter ? scope.valuePropGetter(itemObject) : itemObject;
}
scope.updateValueFromModel = function(modelValue){
if(scope.isMultiple){
var selectionArray = [];
angular.forEach(modelValue, function(modelItem, key){
var modelItemValue = scope.getValueMapper(modelItem);
selectionArray.push(modelItemValue);
});
scope.selectionModel = selectionArray;
}else{
var items = scope.itemsGetter(scope);
angular.forEach(items, function(item, key){
var itemValue = scope.getValueMapper(item);
if(itemValue == modelValue){
scope.selectionModel = item;
return false;
}
});
}
}
if(scope.isMultiple){
scope.$watchCollection(attrs.ngModel, function(modelValue, oldValue) {
scope.updateValueFromModel(modelValue);
});
}else{
scope.$watch(attrs.ngModel, function(modelValue){
scope.updateValueFromModel(modelValue);
});
}
//watch the items in case of async loading
//scope.$watch(attrs.items, function(){
// scope.updateValueFromModel(scope.ngModel.$modelValue);
//});
scope.onItemSelect = function(item, model){
var movelValue = scope.getValueMapper(item);
if(scope.isMultiple){
scope.ngModel.$viewValue.push(movelValue);
}else{
scope.ngModel.$setViewValue(movelValue);
}
}
scope.onItemRemove = function(item, model){
var removedModelValue = scope.getValueMapper(item);
if(scope.isMultiple){
var removeIndex = null;
angular.forEach(scope.ngModel.$viewValue, function(itemValue, index){
if(itemValue == removedModelValue){
removeIndex = index;
return false;
}
});
if(removeIndex){
scope.ngModel.$viewValue.splice(removeIndex, 1);
}
}else{
scope.ngModel.$setViewValue(movelValue);
}
}
}
}
};
}])
.run(['$templateCache', function ($templateCache) {
$templateCache.put('/global/dg-ui/dg-select.tpl.html',
'<ui-select class="ui-select" ng-model="selectionModel" on-select="onItemSelect($item, $model)" on-remove="onItemRemove($item, $model)" ng-disabled="disabled"><ui-select-match></ui-select-match><ui-select-choices></div></ui-select-choices></ui-select>');
$templateCache.put('/global/dg-ui/dg-select-multi.tpl.html', '<ui-select class="ui-select" multiple ng-model="selectionModel" on-select="onItemSelect($item, $model)" on-remove="onItemRemove($item, $model)" ng-disabled="disabled"><ui-select-match></ui-select-match><ui-select-choices></ui-select-choices></ui-select>');
}]);
可能我在这里做错了什么。我将不胜感激任何帮助:)，谢谢！