[AngularJS]21. Creating an Attribute Directive

As you probably have noticed, we have built out more information on the specs tab. Let's refactor the contents of our specs div into an attribute directive.

Move the contents inside the specs div to the product-specs.html.

          <div ng-show="tab.isSet(2)">
            <h4>Specs</h4>
            <ul class="list-unstyled">
              <li>
                <strong>Shine</strong>
                : {{product.shine}}</li>
              <li>
                <strong>Faces</strong>
                : {{product.faces}}</li>
              <li>
                <strong>Rarity</strong>
                : {{product.rarity}}</li>
              <li>
                <strong>Color</strong>
                : {{product.color}}</li>
            </ul>
          </div>

Should be:

          <div ng-show="tab.isSet(2)">

          </div>

And product-specs.html should be:

            <h4>Specs</h4>
            <ul class="list-unstyled">
              <li>
                <strong>Shine</strong>
                : {{product.shine}}</li>
              <li>
                <strong>Faces</strong>
                : {{product.faces}}</li>
              <li>
                <strong>Rarity</strong>
                : {{product.rarity}}</li>
              <li>
                <strong>Color</strong>
                : {{product.color}}</li>
            </ul>

 

Create a new attribute directive for our specs tag called productSpecs. Have it use our new product-specs.html template.

  app.directive('productSpecs', function(){
    return{
      restrict: 'A',
      templateUrl: 'product-specs.html'
    };
  });

 

In index.html, use your new attribute directive to show the product specs.

<div product-specs ng-show="tab.isSet(2)"></div>