dynamic templating

README.md

@@ -1,5 +1,5 @@
 # angular-timer — Sample AngularJS directive demonstrating re-usability & interoperability
 
-This project is a sample AngularJS directive demonstrating
+Sample AngularJS directive
 
 

app/js/timer.js

@@ -1,26 +1,15 @@
 angular.module('timer', [])
-  .directive('timer', function ($timeout) {
+  .directive('timer', function ($timeout, $compile) {
     return  {
       restrict: 'E',
-//      template: "<h3>{{timeTaken}}</h3>",
       replace: false,
       scope: {interval: '=interval'},
-      link: function ($scope, $element) {
-
-
-        console.log('###### $element = ', $element);
-
-        console.log('###### BEFORE $element.html() = ', $element.html());
-
-//        $element[0].innerHTML = '<h3>{{timeTaken}}</h3>';
-
-        if ($element.html() === '') {
-          console.log('###### setting default template', $element);
-          $element.html('<h3>{{timeTaken}}</h3>');
+      controller: function ($scope, $element) {
+        if ($element.html().trim().length === 0) {
+          var template = $compile('<h3>{{timeTaken}}</h3>')($scope);
+          $element.parent().append(template);
         }
 
-        console.log('###### AFTER $element.html() = ', $element.html());
-
         $scope.startTime = null;
         $scope.timeoutId = null;