Directives

[CodingCarlos]

Directives

Full information about directives in Oficial Angular Documentation

<directive></directive>
<div directive></div>
<div directive="data"></div>

.directive('directive', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

directive('event', function() {
  return {
    templateUrl: function(elem, attr) {
      return 'event-' + attr.type + '.html';
    }
  };
});

<event type="comment"></event>

Restrictions The restrict option is typically set to:

'A' - only matches attribute name 'E' - only matches element name 'C' - only matches class name 'M' - only matches comment These restrictions can all be combined as needed:

'AEC' - matches either attribute or element or class name

directive('myCustomer', function() {
  return {
    restrict: 'E',
    templateUrl: 'my-customer.html'
  };
});

[CodingCarlos]

When using scope to link attributes, if using syntax "=attr", you are creating a js binding between directive scope and original element. To create just a string (passig only the value), use the syntax "@attr" instead more info

return {
    restrict: 'AE',
    scope: {
       max: '@max',
       progress: '@progress',
       error: '@error'
    }
}