title: Use an angular directive to activate or deactivate a call to a service
body: <p>I'm checking whether or not a username already exists when I create a new user. I also want to be able to edit a user, and I'm actually using the same form for this. When the form is in edit-mode, you are not allowed to change the username and the input field will be disabled. </p>
  
  <p>I have a directive that checks with the database if the username is unique, and validates or invalidates the input. This directive should not fire when the form is in edit-mode, because the username is not allowed to be edited, and the form should validate.</p>
  
  <pre><code>&lt;input name="alias" 
      class="form-control" 
      type="text" 
      ng-model="user.alias" 
      required
      ng-model-options="{ debounce: { default : 500, blur: 0 }}" 
      validate-alias="{{formMode == 'new' ? true : false}}" 
      /&gt;
  </code></pre>
  
  <p>And the directive:</p>
  
  <pre><code>.directive('validateAlias', function($http, $q) {
          return {
              restrict: 'A',
              require: 'ngModel',
              validateAlias: '=',
              link: function(scope, element, attrs, ngModel) {
                  attrs.$observe('validateAlias', function(){
                      console.log("validateAlias: " + attrs.validateAlias + ", which is a " + typeof attrs.validateAlias);
                      //this returns "validateAlias: false, which is a string"
  
                      if (attrs.validateAlias === 'true') console.log("should work"); else console.log("n/a");
                      //this returns "should work"    
  
                      if (attrs.validateAlias === 'true') {
                          ngModel.$asyncValidators.username = function (alias) {
                              return $http.get(aliasurl + alias).then(
                                  function (response) {
                                      if (response.data.length &gt; 0) {
                                          return $q.reject('Username not unique');
                                      } else {
                                          return $q.resolve();
                                      }
                                  }
                              );
                          };
                      }
                  });
              }
          };
      })
  </code></pre>
  
  <p>So what happens is that in the edit-mode the first if-statement returns what I expect (false, aka do not validate, and the attribute in the DOM matches this, displaying validate-alias='false'), yet the username is still checked with the database. 
  Everything works fine when I'm in new-mode, but that's probably just coincidence, not because the code works as it should.</p>
  
  <p>I am doing something wrong, but I can't figure out where...!</p>
  
  <hr>
  
  <h2>Edit:</h2>
  
  <p>Right, I've changed things around a little bit. I now have the following directive:</p>
  
  <pre><code>.directive('validateAlias', function($http, $q) {
          return {
              restrict: 'A',
              scope: {
                  validateAlias: '@'
              },
              link: function(scope, element, attrs) {
                  scope.$watch(attrs.validateAlias, function(v){
                      console.log("validateAlias: " + v + ", which is a " + typeof v);
                      if (v === true) console.log("the check is active"); else console.log("the check is NOT active");
                      if (v === true) {
                          ngModel.$asyncValidators.username = function (alias) {
                              return $http.get(aliasurl + alias).then(
                                  function (response) {
                                      if (response.data.length &gt; 0) {
                                          return $q.reject('Username not unique');
                                      } else {
                                          return $q.resolve();
                                      }
                                  }
                              );
                          };
                      }
                  });
              }
          };
      })
  </code></pre>
  
  <p>Now the $watch does not seem to work... what am I missing?</p>
  
  <hr>
  
  <h2>Final edit:</h2>
  
  <p>The DOM had a set variable "false" for the attribute I made... the watch worked fine, but the DOM was generated once, so there was nothing to watch.</p>
  
  <p>Luckily for me, every time the attribute changed, I could reload the DOM as well (virtually switching screens), and so the scope reads the attribute again, and the variable is passed, making the directive do exactly what I want. The code I posted after the first edit is what I used.</p>
  
  <p>I'm not sure if that's the Angular way, but it works for now. When I find a better solution, I'll update the code.</p>