AngularJS选择性地显示动态指令

我创建了一些指令。页面加载时，将加载所有指令。所有指令都会出现。我想在调用函数时显示指令。例如，当调用

$scope.getConsultant

时，必须显示

consultant

指令。不应出现其他指令。我有太多的html模板，但我没有写在这里。我如何控制？最好的方法是什么

指令

<div class='container'>
   <div consultant></div>
   <div investment></div>
   <div portfolio></div>
</div>

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

---

我建议重新构造此代码以利用ngSwitch。

---

如果目标是不显示其他指令，则加载数据，然后使用ngSwitch即可

我建议重新构造此代码以利用ngSwitch。

---

如果目标是不显示其他指令，则加载数据，然后使用ngSwitch即可

首先，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>

---

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

首先，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>

---

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

而不是

$。ajax

使用服务而不是

$。ajax

使用服务我个人认为ngSwitch在这种情况下工作得更好，保持匹配逻辑更简单，使用设计好的角度指令，正如@scales指出的，您可以查看ngSwitch，但性能取决于您的用例。检查一下，要么行。由于选项太少，ng if的性能可能会更好，尽管可能需要毫秒。不过，每种方法都是可行的，ng开关可能更清晰。我个人认为ngSwitch在这种情况下工作得更好，使匹配逻辑更加简单，按照设计使用角度指令，而不是基本上重新发明轮子。正如@scales指出的，您可以检查ngSwitch，但从性能上看，这取决于您的用例。检查一下，要么行。由于选项太少，ng if的性能可能会更好，尽管可能需要毫秒。不过，每种方法都是可行的，ng开关可能更清晰。