У меня есть компонент в angularjs, который я хочу использовать несколько раз.Этот компонент имеет внутреннюю множественную выборку (http://dotansimha.github.io/angularjs-dropdown-multiselect/docs/#/main).. Итак, я определил свой компонент:
angular.module('app')
.component('filtros', {
templateUrl: './filtros.html',
bindings: {
},
controller: ['$scope', '$http', '$translate', filtrosController]
});
function filtrosController($scope, $http, $translate) {
$scope.multiselectConfig = {
model: [],
data: [],
settings: { checkBoxes: true },
text: {
checkAll: $translate.instant('checkAll'),
uncheckAll: $translate.instant('uncheckAll'),
buttonDefaultText: $translate.instant('buttonDefaultText'),
dynamicButtonTextSuffix: $translate.instant('dynamicButtonTextSuffix')
}
};
$scope.config.filtro = {
tipo: {
titulo: "Tipo",
apiUrl: api.tipo,
multiselect: {
config: $scope.multiselectConfig
}
},
estado: {
titulo: "Estado",
apiUrl: api.estado,
multiselect: {
config: $scope.multiselectConfig
}
}
};
angular.module('app')
.component('filtroSimple', {
templateUrl: './filtroSimple.html',
bindings: {
config: '<'
},
controllerAs: '$ctrl',
controller: ['$scope', '$http', '$translate', filtroSimpleController]
});
function filtroSimpleController($scope, $http, $translate) {
var $ctrl = this.config;
$ctrl.fn = {
cargarFiltro: cargarFiltro
};
$ctrl.fn.cargarFiltro();
function cargarFiltro() {
$http.get($ctrl.apiUrl)
.then(function (response) {
if (response.data) {
$ctrl.multiselect.config.data = response.data;
}
});
}
}
<filtro-simple config="config.filtro.tipo"></filtro-simple>
<filtro-simple config="config.filtro.estado"></filtro-simple>
В итоге получается, что оба компонента имеют данные последнего компонента.в первом состоянии были загружены, а во втором состоянии также были загружены (хотя шаг за шагом наблюдая за выполнением, первое получает данные типа хорошо).
Почему значения перезаписываются?
РЕДАКТИРОВАТЬ: я сделал тест в Plunkr:
http://plnkr.co/edit/QSrlr4nHR4yh2cmEqR2y?p=preview