Angular JS - 根据当前范围加载自定义指令

时间:2013-11-29 16:57:23

标签: angularjs angularjs-directive

我想要实现的是一个可重用的选项卡式元素,可以根据当前活动选项卡加载自定义指令。指令中的指令。

我已经构建了tab包装器元素并且有了更新$ scope.activeTab的标签,并且在这个元素中我已经硬编码。

我想做的是让标签指示哪个指令在里面,所以它可以是description-element,或image-element,或meta-element等......

我可以通过在加载时在选项卡包装器中编写所有元素来轻松完成此操作,然后在单击选项卡时使用ng-hide切换它们,但我真的希望能够在内容中使用AJAX替换选项卡更改时的内容。

有人可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

您可能在ng-switch http://docs.angularjs.org/api/ng.directive:ngSwitch

之后

它将从DOM中删除与条件不匹配的元素。

<div ng-switch on="item">
    <div ng-switch-when="image"><image-directive /></div>
    <div ng-switch-when="meta"><meta-directive /></div>
</div>

controllers.controller('appCtrl', function ($scope) {
    $http({method: 'GET', url: '/someUrl'}).
        success(function(data, status, headers, config) {
            $scope.item = data.elementType;
    }).
});