title: Ng-if and custom directives
body: <p>I've been creating custom directives that involve initialization of data on load.  Since this initialization depends on the state of scope objects from the parent bound to the isolate scope within my directives, I've been enclosing the directives in ng-if statements, so they are only rendered in the DOM, and therefore initialized, once the appropriate parent scope objects are created.</p>
  
  <p>Ng-if seems preferable because the directives have various API calls bound to $watches that I would prefer to not trigger until the data is valid.</p>
  
  <p>For example, I have a directive that provides an interface for editing a scheduled event.  The parent page allows users to select an event for editing, or to create a new event.  Creating a new event is done in a way that allows the user to select a variety of values to pre-populate the event object with (start dates, event type, whether the event is tied to another object in the database, etc.).</p>
  
  <p>The ng-if wrapping the directive gets set to true when the user makes the selections necessary for working with the event, and the event (either an existing event, for edits, or a framework for an event created by a custom service, for adds) is bound to the isolate scope of the directive.</p>
  
  <p>This prevents the $watches from triggering until the valid event is bound to the directive, and also allows me to initialize some variables local to the directive for validation and data manipulation of the event.</p>
  
  <p>The problem I'm running in to is that enclosing the directive in an ng-if isolates the isolate scope.</p>
  
  <p>For example, a start time for the event is something that may, or may not, be specified by the user when they create the new event from the controller.  If they don't, I want to calculate a default start time based upon other variables within the directive.  If they do, then I want to use that value.</p>
  
  <p>The way I'm doing this is to bind a scope variable from the controller to the isolate scope of the directive:</p>
  
  <pre><code>scope: {
     editEvent: '=',
     overrideTime: '='
  }
  </code></pre>
  
  <p>This is passed as an attribute of my directive:</p>
  
  <pre><code>&lt;add-edit-event ng-if="viewEdit" event="editEvent" override-time="overrideTime"&gt;
  &lt;/add-edit-slot&gt;
  </code></pre>
  
  <p>Once the directive creates the new event (or cancels out), I want to reset that overrideTime in the parent scope to null.</p>
  
  <p>To do that from within my directive, however, I can't rely on the two-way binding to work without traversing up past the ng-if scope, thus:</p>
  
  <pre><code>scope.$parent.$parent.overrideTime = null;
  </code></pre>
  
  <p>I keep running into situations like this, where the fact that the directive is enclosed in an ng-if causes complications with the scope, which makes me feel like there's a problem with my general approach.</p>
  
  <p>Is there a better way of handling conditional initialization and loading of custom directives, or is enclosing them in ng-if statements okay, so long as I deal with the interposing ng-if's scope appropriately?</p>