Directives in Angular

Question

I have this directive view here in my code:

<div class="busy-indicator angular-animate" ng-show="busy"></div>
<div class="breadcrumblist" ng-class="atTopLevel ? ['at-top-level'] : null">
    <div class="breadcrumblist-display angular-animate">
        <label id="searchBox">Search</label><input class="c-context-menu-container  t-menu-background  c-context-menu-text" type="text" autocomplete="off" id="IdSearch" ng-model = "searchText.Name">
        <div class="breadcrumblist-parents">
            <div ng-show="::parents && parents.length >= 1"
                 ng-repeat="parentLink in parents"
                 class="breadcrumblist-parent-link t-breadcrumb--parent-bgcolor t-border--bottom-grey48"
                 ng-click="navUpToParent(parentLink)"
                 ng-class="{'selected': isSelected(parentLink.object), 'draggable': isDraggable(parentLink.object)}"
                 data-index="{{$index}}">


        </div>

But, the searchBox is appearing for all places on my app but I want to make it appear just for one directive in particular. What should I do? I tought about make a scope variable to just "ng-show" this particular searchbox with a condition, but I don't know exactly how to do that, can you help me?

Answer 1

Until you give more information to your specific problem, here are some possibly relevant things you can do to debug your problem and find a solution

the searchBox is appearing for all places on my app but I want to make it appear just for one directive in particular

The combination of the name of the directive + its restriction might cause the directive to appear in unwanted locations.

More information on restrict if needed .

So for example, if you have a directive called 'breadcrumblistParentLink', which is restricted to C (class) - you might find it in undesired locations since you're also using this class to style some elements on your page.

If that's the case, you might find it helpful restricting directives to attributes and elements and giving some unique names.

I would also like to refer to your question

just "ng-show" this particular searchbox with a condition, but I don't know exactly how to do that

If you want a specific behavior for one instance of a directive, there are multiple ways to do that.

Most common is passing an attribute. For example, this is how you use it

  <div my-awesome-directive show-searchbox="true"></div>

And this is how you'd put show on the directive scope

angular.module('myApp',[]);

angular.module('myApp').directive('myAwesomeDirective', function(){
  return {
    template: 'this is my template <span ng-show="showSearchBox">This is search box</span>',
    restrict: 'A',
    scope: {
      showSearchBox: '<'
    },
    link: function(scope, element, attrs){
      console.log(scope.showSearchBox);
    }
  }
})

You can play around with it here: https://plnkr.co/edit/4MdNeEafbZjq2kEFKYAl?p=preview

You can also look directive at attrs variable ( attrs.showSearchBox ) and spare the binding in some cases.

For example:

angular.module('myApp',[]);

angular.module('myApp').directive('myAwesomeDirective', function(){
  return {
    template: 'this is my template <span ng-show="showSearchBox()">This is search box</span>',
    restrict: 'A',
    scope: {

    },
    link: function(scope, element, attrs){
      scope.showSearchBox = function(){
       return attrs.showSearchBox; 
      }
    }
  }
})

Note I am using a function on the scope.

This function can also refer to the DOM and do something like $(element).is('[show-search-box]') if you are more comfortable with jquery - but it is highly recommended to stick to angular way of doing things.