Angular: template only directive 14357945

http://angularjs.org/

by mrajcok

HTML

<div ng-controller="MyCtrl">
  {{names[0]}} {{names[1]}}
  <br/>
  <hello-world my-username="{{names[0]}}"></hello-world>
  <br/>
  <hello-world my-username="{{names[1]}}"></hello-world>
  <br/>
  <button ng-click="clicked()">Click Me</button>
</div>

JavaScript

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

function MyCtrl($scope) {
  var counter = 1;
  $scope.names = ["Number0", "", "Epsum"];
  $scope.clicked = function () {
    $scope.names[0] = "Number" + counter++;
  };
}

myApp.directive('helloWorld', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      myUsername: '@'
    },
    template: '<span><div ng-show="myUsername">Hello {{myUsername}}</div>'
    + '<div ng-hide="myUsername">Sorry, No user to greet!</div></span>',
  };
});