title: AngularJS conditional directives
body: <p>I have the following directive:</p>
  
  <pre><code>myDirective.directive('sidebar', function () {
    return {
      restrict: 'E',
      replace: true,
      template: '&lt;li ng-repeat="m in menu"&gt;&lt;a href="{{m.url}}"&gt;&lt;i class="{{m.image}}"&gt;&lt;/i&gt; {{m.name}}&lt;/a&gt;&lt;/li&gt;',
      link: function (scope, elem, attrs) {
        scope.menu = [
          {
            "name": "Home",
            "url": "/",
            "image": "fa fa-bar-chart-o"
          },
          {
            "name": "Data Integration",
            "url": "/manage/dataintegration/index",
            "image": "fa fa-dashboard"
          },
          {
            "name": "Users",
            "url": "/manage/users/index",
            "image": "fa fa-dashboard"
          },
          {
            "name": "Logger",
            "url": "/manage/logger/index",
            "image": "fa fa-dashboard"
          },
          {
            "name": "Drop",
            "url": "",
            "image": "fa fa-dashboard",
            "submenu": [
              {
                "name": "Logger",
                "url": "/manage/logger/index",
                "image": "fa fa-dashboard"
              },
              {
                "name": "Logger2",
                "url": "/manage/logger/index",
                "image": "fa fa-dashboard"
              }
            ]
          }
        ]
  
      }
    }
  });
  </code></pre>
  
  <p>Is it possible to somehow apply an <code>ng-if</code> within the template in a way that will allow me to know if the current menu item has a <code>submenu</code> element and therefore change the template accordingly?</p>