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

我建议重组此代码以利用ngSwitch。 https://docs.angularjs.org/api/ng/directive/ngSwitch

如果目标是不出现其他指令，则先加载数据，然后使用ngSwitch即可。

Answer 2

首先，Satpal是正确的，请尽可能使用Angular内置函数。

您需要一些变量，您可以键入该变量以确定当前正在“显示”哪个指令。然后，在每一个上，您都可以将其与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>

这只是一个粗糙的示例，但希望您能理解。

AngularJS有选择地显示动态指令

2 个答案: