Conditional control structure for ui.router states

angular-ui-sref-if.js

/**
 * Conditional control structure for ui.router states
 * 
 * usage in js:
 * angular.module('myModuel',['ui.router','ui-sref-if') ......
 * 
 * usage in view:
 * <a ui-sref=".nextstate" ui-sref-if="!myForm.$invalid">Next State</a>
 * 
 * sass:
 * a:hover{
 *     cursor: pointer;
 *     &[disabled='disabled'],
 *     &.disabled{
 *       cursor: not-allowed;
 *     }
 *   }
 */

angular.module('uiSrefIf',[])
.directive('uiSrefIf',function($compile){
  return {
    scope: {if: '=uiSrefIf'},
    link: function($scope, $element, $attrs) {
      $element.removeAttr('ui-sref-if');
      $compile($element)($scope);

      $scope.uiSref = $attrs.uiSref;
      $scope.$watch('if', function(bool) {
        $element.toggleClass('disabled',!bool);
        if (bool) {
          $element.removeAttr('disabled','disabled');
          $element.attr('ui-sref', $scope.uiSref);
        }
        else {
          $element.removeAttr('ui-sref')
          $element.removeAttr('href')
          $element.attr('disabled','disabled');
        }
        $compile($element)($scope);
      });
    }
  };
});