AngularJS Directive: $ scope does not update the UI

Question

AngularJS Directive: $ scope does not update the UI

Navigation

#1 by (1 votes)

0

Well, I'm trying to filter the books according to the area the person selects. So far so good, I can get the values from the area and the bank, but the UI does not update the listing.

HTML

<div class="col-lg-12" id="filtros-acervo">
    <div class="row">
        <div class="col-lg-12" id="filtro-titulo">
            <h3>Filtros:</h3>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 filtros" ng-repeat="area in areas">
            <div class="checkbox">
                <input type="checkbox" checkbox-group> {{area.descricao}}
            </div>
        </div>
    </div>
</div>

Angular

app.controller('Acervo', function($scope,$http){

$scope.livros = []; // Cria um array vazio de livros
$scope.limite = 30; // Define o limite max de livros por pagina
$scope.paginacao = 0; // Paginacao começa do 0
$scope.array = []; // Cria um array vazio (vai servir no selecionar areas)

// Busca todos os livros
$http.get('config/all').success(function(data){
    if (data != 0) {
        $scope.livros = data;
    }
    else {
        $scope.livros = '';
    }
    // Retorna a quantidade de paginas necessarias
    $scope.paginas = function(){
        return Math.ceil($scope.livros.length / $scope.limite);
    }
});

// Busca todas as areas
$http.get('areas').success(function(areas){
    $scope.areas = areas;
});

})

Directive

.directive("checkboxGroup", function ($http) {
return {
    restrict: "A",
    link: function (scope, elem, attrs) {
        elem.bind('click', function () {
            scope.$apply(function () {
                var index = scope.array.indexOf(scope.area.id);
                // Add se marcado
                if (elem[0].checked) {
                    if (index === -1) scope.array.push(scope.area.id);
                }
                // Remove se desmarcado
                else {
                    if (index !== -1) scope.array.splice(index, 1);
                }
                $http.post('config/livrosAreas', {"area" : scope.array}).success(function(data){
                    scope.livros = data;
                    // Retorna a quantidade de paginas necessarias
                    scope.paginas = function(){
                        return Math.ceil(scope.livros.length / scope.limite);
                    }
                });
            });
        });
    }
}

The Bank gives me the return I want right, it just does not update the book listing.

angularjs

asked by anonymous 28.07.2014 / 19:27

1 answer

Android: Instagram photos of a certain user Create style and not stylize xhtml css

score 1 · Accepted Answer

The problem is with your directive. When Angular updates the scope from your call in scope.$apply your ajax has not yet finished execution, so updates will only appear on the next change in scope. The correct thing would be for you to perform ajax before updating the scope. That way your directive changes to:

.directive("checkboxGroup", function ($http) {
return {
    restrict: "A",
    link: function (scope, elem, attrs) {
        elem.bind('click', function () {
                var index = scope.array.indexOf(scope.area.id);
                // Add se marcado
                if (elem[0].checked) {
                    if (index === -1) scope.array.push(scope.area.id);
                }
                // Remove se desmarcado
                else {
                    if (index !== -1) scope.array.splice(index, 1);
                }
                $http.post('config/livrosAreas', {"area" : scope.array}).success(function(data){
                    scope.livros = data;
                    // Retorna a quantidade de paginas necessarias
                    scope.paginas = function(){
                        return Math.ceil(scope.livros.length / scope.limite);
                    }
                }).then(function(){
                    scope.$apply();
                });
        });
    }
}