title: Shall I use "directive" or "controller" for this case?
body: <p>We want to write a dialog directive in an angularjs application, but have something hard to decide.</p>
  
  <p>Say I have some buttons on the HTML and we want to write a directive 'popup':</p>
  
  <pre><code>&lt;div&gt;
    &lt;button popup&gt;Email&lt;/button&gt;
    &lt;button popup&gt;Phone&lt;/button&gt;      
    &lt;button popup&gt;Other&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When clicked on the button, it will show a popup dialog with something. There are some common UI behaviors between the 3 buttons, as well as some different logic.</p>
  
  <h2>option 1 (no controller)</h2>
  
  <p>We define 3 directives, e.g. <code>popup-email</code>, <code>popup-phone</code>, <code>popup-other</code>:</p>
  
  <pre><code>app.directive('popup-email', ['user', 'ngDialog', function(user, ngDialog) {
      return {
         link: function(scope, element, attrs) {
            if(user.email) {
              ngDialog.open({...});
            } else {
              element.addClass("disabled");
            }
         }
      }
  }]);
  
  app.directive('popup-phone', ['user', 'ngDialog', function(user, ngDialog) {
      return {
         link: function(scope, element, attrs) {
            if(user.phone) {
              ngDialog.open({...});
            } else {
              element.addClass("disabled");
            }
         }
      }
  }]);
  
  app.directive('popup-other', ['user', 'ngDialog', function(user, ngDialog) {
      return {
         link: function(scope, element, attrs) {
            if(user.other) {
              ngDialog.open({...});
            } else {
              element.addClass("disabled");
            }
         }
      }
  }]);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
    &lt;button popup-email&gt;Email&lt;/button&gt;
    &lt;button popup-email&gt;Phone&lt;/button&gt;      
    &lt;button popup-email&gt;Other&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this option, we will define 3 directives, no controller. The good part is each button is a standalone button with the directive, all the logic is inside the directive. The bad part is we have some business logic in each directive, and there are some common logic in all the 3 directives.</p>
  
  <h2>Option 2 (with a controller)</h2>
  
  <p>We will provide only one directive for the command behavior, and one controller for the difference:</p>
  
  <pre><code>app.directive('popup', ['ngDialog', function(ngDialog) {
      return {
         link: function(scope, element, attrs) {
            if(attrs.enable==="true") {
              ngDialog.open({...});
            } else {
              element.addClass("disabled");
            }
         }
      }
  }]);
  
  app.controler('ContactController', function(scope, user) {
      scope.enableEmail = if(user.email) true else false;
      scope.enablePhone = if(user.phone) true else false;
      scope.enableOther = if(user.other) true else false;
  });
  </code></pre>
  
  <p>The HTML will be:</p>
  
  <pre><code>&lt;div&gt;
    &lt;button popup enable="{{enableEmail}}"&gt;Email&lt;/button&gt;
    &lt;button popup enable="{{enablePhone}}"&gt;Phone&lt;/button&gt;      
    &lt;button popup enable="{{enableOther}}"&gt;Other&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For this option, the good part is the directive is reusable, but we will have to define a controller for them.</p>