我在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做过测试: