angularjs显示和隐藏编译指令

时间:2014-02-03 17:55:23

标签: angularjs

我正在创建一个树视图,并试图坚持角度。我把它关闭了,当用户点击一个文件夹时,我附加一个新指令,然后通过ajax获取要显示的数据。

我遇到的问题是如何隐藏动态创建的指令。当用户最初点击该文件夹时,会调用 folderSelect 并插入一个treechild指令。当用户点击相同的 folderSelect 时,我需要隐藏刚创建的新treechild。我想我可以在我正在创建的指令上使用 ng-show 来做到这一点。在动态创建此指令时,我正在努力解决如何做到这一点。在此先感谢您的任何帮助

一些代码::: 我有文件夹

data-ng-click="folderSelect($event,node)"

在控制器中我有

    $scope.folderSelect = function($event,node) {
        node.expanded = node.expanded ? false : true;
        if ( node.expanded ){
            var treechild = angular.element(document.createElement('treechild'));
            treechild.attr('parentid',node.data.rf_Breadcrumb);
            treechild.attr('classlevel',node.data.class_Level);
            treechild.attr('listtype',$routeParams.listType);
            treechild.attr('ng-show','');
            var el = $compile( treechild )( $scope );
            angular.element($event.target).parent().append(treechild);
        }
    };

我的问题是我如何将 treechild.attr('ng-show','')连接到 node.expanded ,所以当父

指令

myApp.directive('treechild', function () {
return {
    templateUrl: '/template/tree/treechild.html?v3',
    controller: ['$scope', '$http', function($scope, $http) {
        $scope.getChild = function(bread,listtype,classlevel) {
            $http.get(URLsArray['therapeuticChildURL'] ,{params: {filter:listtype, breadcrumb:bread, classlevel: classlevel }} ).success(function(data) {
                if ( data.therapeuticclass.length == 0 ){
                    alert("No records found");
                    return;
                }
                $scope.therapeuticchildlist = data.therapeuticclass[0].children;
                $scope.druglist = data.therapeuticclass[0].drugs;
            });
        }
    }],
    restrict: 'E',
    scope:true,
    link: function (scope, element, attrs) {
        scope.getChild(attrs.parentid,attrs.listtype, attrs.classlevel );

    }
   };
});

1 个答案:

答案 0 :(得分:1)

如果您的树视图使用现有解决方案是一个选项,我真的可以推荐Nick Perkins'angular-bootstrap-nav-tree。您可以查看演示here

它也可以帮助您实现自己的树视图。