Scope is overwritten by having several instances of the same angularjs component

Question

Scope is overwritten by having several instances of the same angularjs component

Navigation

#1 by (0 votes)

1

My doubt is that I have a component in angularjs that I want to use several times on the same page, passing different parameters. This component has a multiselect inside ( link ). So I have defined my component:

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>

In the end, the result is that both components have the data of the last component. That is, in the first states were loaded, and in the second states were also loaded (although seeing the execution step by step, the first one receives the type data well).

Why are the values overwritten?

EDIT: I did a test in Plunker:

link

javascript angularjs

asked by javichu 25.04.2018 в 10:03

source

1 answer

Undefined method 'getArticles'. The method name must start with either findBy or findOneBy! how can I fix this error when installing builtdozer

score 0 · Accepted Answer

Analyzing a bit the problem you have, I found a solution that can help you solve your situation, the problem you have is that you are calling the variable $scope.multiselectConfig in each object of $scope.config.filtro that is in the multiselect of tipo: and estado: and then of course you will take the same result for both multiselect , then I leave you a timely solution:

$scope.multiselectConfigType = {
    model: [],
    data: [],
    settings: { checkBoxes: true },
    text: {
        checkAll: $translate.instant('checkAll'),
        uncheckAll: $translate.instant('uncheckAll'),
        buttonDefaultText: $translate.instant('buttonDefaultText'),
        dynamicButtonTextSuffix: $translate.instant('dynamicButtonTextSuffix')
    }
};
$scope.multiselectConfigState = {
    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.multiselectConfigType 
        }
    },
    estado: {
        titulo: "Estado",
        apiUrl: api.estado,
        multiselect: {
            config: $scope.multiselectConfigState
        }
    }
};