Creé algunas directivas. Cuando se carga la página, se cargan todas las directivas. Aparecen todas las directivas. Quiero mostrar directivas cuando se llama a la función. Por ejemplo, cuando se llama a $scope.getConsultant, debe aparecer la directiva consultant. No deberían aparecer otras directivas. Tengo demasiadas plantillas html pero no escribí aquí. ¿Cómo puedo controlar? ¿Cuál es la mejor manera?

Directivas

<div class='container'>
   <div consultant></div>
   <div investment></div>
   <div portfolio></div>
</div>
window.ngApp.directive('investment', function () {
    return {
        templateUrl: 'lib/view/investment.html'
    };
});

window.ngApp.directive('consultant', function () {
    return {
        templateUrl: 'lib/view/consultant.html'
    };
});
window.ngApp.directive('portfolio', function () {
    return {
        templateUrl: 'lib/view/portfolio.html'
    };
});

AngularJS

var ngApp = angular.module('tapusor', []);
window.ngApp.controller('controllerHome', ['$scope', '$controller',
    function ($scope, $controller) {
        $scope.lat =25.33544;
        $scope.lng =13.21687;
        $scope.getConsultant = function () {
            $.ajax({
                type: 'post',
                url: "/",
                dataType: 'json',
                data: {
                    lat: $scope.lat,
                    lng: $scope.lng
                },
                async: true,
                cache: false,
                success: function (data) {
                    $scope.resConsultant = data;
                }
            });
        }

        $scope.searchInvestment = function () {            
            $.ajax({
                type: 'post',
                url: "/",
                dataType: 'json',
                async: false,
                cache: false,
                data: {
                    lat:$scope.lat,
                    lng:$scope.lng
                },
                success: function (data) {
                    $scope.resInvestment = data;
                }    
            })
        } 

        $scope.portfolio = function () {            
            $.ajax({
                type: 'post',
                url: "/",
                dataType: 'json',
                async: false,
                cache: false,
                data: {
                    lat:$scope.lat,
                    lng:$scope.lng
                },
                success: function (data) {
                    $scope.resPortfolio = data;
                }    
            })
        }              
    }
]);
0
Hermes 16 oct. 2018 a las 14:54

2 respuestas

La mejor respuesta

Primero, Satpal tiene razón, use incorporaciones angulares siempre que sea posible.

Necesita alguna variable que pueda eliminar para determinar qué directiva se está 'mostrando' actualmente. Luego, en cada uno, puede usar eso con ng-if.

<div class='container'>
   <div consultant ng-if="$shown == 'consultant'"></div>
   <div investment ng-if="$shown == 'investment'"></div>
   <div portfolio ng-if="$shown == 'portfolio'"></div>
</div>

Este es solo un ejemplo aproximado, pero espero que entiendas la idea.

2
Steve -Cutter- Blades 16 oct. 2018 a las 12:01

Recomendaría reestructurar este código para aprovechar un ngSwitch. https://docs.angularjs.org/api/ng/directive/ngSwitch

Si el objetivo es que no aparezcan otras directivas, entonces cargar los datos y luego usar un ngSwitch hará precisamente eso.

2
scales 16 oct. 2018 a las 11:58