sbucek
4/6/2014 - 1:47 PM

jsbin.wubuq.html

jsbin.wubuq.js
content_copyfile_download
angular.module('app', [])

.controller('MainCtrl', function($scope) {
  $scope.person = {
    name: 'John Doe',
    profession: 'Fake name'
  };

  $scope.header = 'Person';
})

.directive('person', function() {
  return {
    restrict: 'EA',
    scope: {
      header: '='
    },
    transclude:true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attrs) {
      scope.person = {
        name: 'Directive Joe',
        profession: 'Scope guy'
      };

      scope.header = 'Directive\'s header';
    }
  };
});
jsbin.wubuq.html
content_copyfile_download
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Angular tips</title>
</head>
<body ng-controller="MainCtrl">
  <person header="header">
    <h2>{{header}}</h2>
    <p person="person">Hello, I am {{person.name}} and,</p>
    <p>I am a {{person.profession}}</p>
  </person>
</body>
</html>