title: Angular.js Directive Template - If Then Conditional For What Template To Use
body: <p>In angular.js, for the directive I would like to specify the property of the <code>template</code> key according to what the <code>attr.checkType</code> is using with <code>if then</code>. How could I do this? The only place I know to place logic would be in the link function, but the template key/property goes outside the link function. </p>
  
  <pre><code>angular.module('monitorApp')
  .directive("countDown", [ 'sseHandler', function (sseHandler) {
      function _bindMessage(scope, message) {
          scope.countFrom = message;
      }
      return {
          restrict: 'E',
          scope: {
              countFrom: "=",
              checkType: "@"
          },
          //WOULD LIKE TO PLACE IF THEN TO SPECIFY WHAT TYPE OF TEMPLATE TO
          //USE ACCORDING TO ATTR.CHECKTYPE. 
          template :  if (attr.checkType == "foo") {
                        '&lt;div class="btn btn-block btn-inverse" id="api-time"&gt;'+
                        'Next update in &amp;nbsp &lt;span class="info-test"&gt;{{countFrom}}&lt;/span&gt;'+
                        '&amp;nbsp seconds} else
                         { 
                            &lt;h1&gt; HI &lt;/h1&gt; 
                         },
  
          link: function(scope, element, attr){
             scope.countFrom = sseHandler.broadcastStamp[attr.checkType] || "initializing";
             scope.$on('ONE_SEC', function() {
                 resultType = attr.checkType;
                 seconds = sseHandler.broadcastStamp[attr.checkType];
  
                 if (seconds &lt; -3) {
                     seconds = "Snap! Broadcast is late." +
                            " Something is broke";
                 }
                 else if (seconds &lt;0) {
                     seconds = "running a little late";
                 } 
                 _bindMessage(scope,seconds);
             });
          }
      }
  }]);
  </code></pre>