CODEWITHSUNDEEP
angularjs
randy
randy

Reputation: 1877

angularjs to show and hide compiled directive

I am creating a tree view and trying to stick to angular. I have it close, where when the user clicks on a folder , i append a new directive which in turn via ajax gets the data to display.

The problem i am having is how to hide the dynamically created directive. When the user initially clicks on the folder, folderSelect is called and i insert a treechild directive. When the user clicks on the same folderSelect i need to hide the new treechild just created. I would think i can do it using ng-show on the directive i am creating. Just struggling wrapping my head around how to do it when creating this directive dynamically. Thanks in advance for any help

Some code::: I have on the folder

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

in the controller i have

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

My question is how do i connect treechild.attr('ng-show','') to node.expanded, so when the parent

the directive

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

    }
   };
});

Upvotes: 1

Views: 366

Answers (1)

muenchdo
muenchdo

Reputation: 2181

In case using an existing solution for your tree view is an option, I can really recommend Nick Perkins' angular-bootstrap-nav-tree. You can check out a demo here.

It might also help you with the implementation of your own tree view.

Upvotes: 1

Related Questions