AngularJS selectively showing dynamic directives

Question

I created a few directives. When the page load all directives is loaded. All directives appear. I want to show directives when the function is called. For example when $scope.getConsultant is called the consultant directive must be appear. Other directives should not appear. I have too many html template but I didn't write here. How can I control? What is the best way?

Directives

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

Instead of `$.ajax` use [`$http`](https://docs.angularjs.org/api/ng/service/$http) service — Satpal, Oct 16 '18 at 11:56

score 2 · Answer 1 · answered Oct 16 '18 at 11:58

I'd recommending restructuring this code to take advantage of an ngSwitch. https://docs.angularjs.org/api/ng/directive/ngSwitch

If the goal is to have other directives not appear, then loading the data, and then using an ngSwitch will do just that.

score 2 · Accepted Answer · answered Oct 16 '18 at 12:01

2

First, Satpal is right, use Angular builtins wherever possible.

You need some variable that you can key off of to determine which directive is currently being 'shown'. Then, on each one, you can use that with 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>

This is just a rough example, but hopefully you get the idea.

answered Oct 16 '18 at 12:01

Steve -Cutter- Blades

5,057
2
26
40

2

I'd personally say that a ngSwitch would work better in this context, keeping the matching logic a little more simplistic, using a Angular directive as designed, and not basically reinventing the wheel. – scales Oct 16 '18 at 12:16
As @scales pointed out, you could check out ngSwitch, but performance-wise it depends on your use-case. Check [this post](https://stackoverflow.com/questions/44583939/angular-ng-if-vs-ng-switch-performance). – remmargorp Oct 16 '18 at 14:04
Either/or would work. With so few options the ng-if may be better performance wise, though it's probably milliseconds. Each approach is viable though, and the ng-switch might be more clear. – Steve -Cutter- Blades Oct 17 '18 at 12:03

AngularJS selectively showing dynamic directives

2 Answers2