覆盖范围多个相同的组件angularjs

时间:2018-04-25 11:24:24

标签: javascript angularjs

我在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

0 个答案:

没有答案