AngularJS выборочно показывает динамические директивы

Question

Я создал несколько директив.При загрузке страницы загружаются все директивы.Все директивы появляются.Я хочу показать директивы при вызове функции.Например, когда вызывается $scope.getConsultant, должна появиться директива consultant.Другие директивы не должны появляться.У меня слишком много HTML-шаблонов, но я здесь не писал.Как я могу контролировать?Какой самый лучший способ?

Директивы

<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;
                }    
            })
        }              
    }
]);

Answer 1

Во-первых, Satpal прав, используйте везде, где это возможно, угловые встроенные функции.

Вам нужна переменная, которую вы можете отключить, чтобы определить, какая директива в данный момент «показывается».Затем на каждом из них вы можете использовать это с 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>

Это просто грубый пример, но, надеюсь, вы поняли идею.

Answer 2

Я бы рекомендовал реструктурировать этот код, чтобы воспользоваться преимуществами ngSwitch.https://docs.angularjs.org/api/ng/directive/ngSwitch

Если цель состоит в том, чтобы другие директивы не появлялись, то загрузка данных, а затем использование ngSwitch сделают именно это.