Pass string straight to angular directive?

Question

I'm trying to understand how to work with directives in Angular. In the examples on angularjs.org, values are set in the scope in JavaScript, and then that scope is referenced when matching a directive.

Template:

  <my-customer info="naomi"></my-customer>

Scope:

  .controller('Ctrl', function($scope) {
    $scope.naomi = { name: 'Cat', address: '1600 Amphitheatre' };
    $scope.igor = { name: 'Dog', address: '123 Somewhere' };
  })

Template:

Name: {{customerInfo.name}} Address: {{customerInfo.address}}

I would like to pass the attribute, straight from the template. So in this example I would like to write a template that outputs:

Name: Naomi

Without going through a scope.

Answer 1

You can do that using the attrs argument of the linking function.

module.directive('name', function () {
  return {
    link: function (scope, element, attrs) {
      console.log(attrs.info);
      // <- 'naomi'
    }
  }
});

Then in markup:

<name info='naomi'></name>

See a live example