How to do Everything in AngularJS

Prevent Route Change

1. Add target="_self" to all elements
2. Create new directive to prevent the defaults:

3. app.directive('a', function() {
     return {
       restrict: 'E',
       link: function(scope, elem, attrs) {
         if (attrs.ngClick || attrs.href === '' || attrs.href === '#') {
           elem.on('click', function(e) {
             e.preventDefault();
           });
         }
       }
     };
   });

Updating Model Within Directives

App.directive('myDirective', function ($parse) {
  return {
    require: 'ngModel',
    link: function (scope, elm, attrs, ctrl) {
      ctrl.$setViewValue(newValue);
      ctrl.$render();
      e.preventDefault();
      scope.$apply();
    });
  };
});

Making AngularJS Work with Bootstrap Vertical Button Group

<div class="btn-group-vertical" ng-class="{'active':selected}">
    <input type="checkbox" autocomplete="off" ng-checked="selected" />
</div>

<Enter> Key Event Directive

JS:

app.directive('ngEnter', function () {
  return function (scope, element, attrs) {
    element.bind("keydown keypress", function (event) {
      if(event.which === 13) {
        scope.$apply(function (){
          scope.$eval(attrs.ngEnter);
        });
        event.preventDefault();
      }
    });
  };
});

HTML Usage:

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" ng-enter="doSomething()"> 
</div> 

Passing Functions to Directives

HTML:

<test color1="color1" update-fn="updateFn(msg)"></test> 

JS:

var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
  $scope.color1 = "color";
    $scope.updateFn = function(msg) { 
    alert(msg);
  }
});

app.directive('test', function() {
  return {
    restrict: 'E',
    scope: {
      color1: '=',
      updateFn: '&'
    },
    // object is passed while making the call
    template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>Click</button>",
    replace: true, 
    link: function(scope, elm, attrs) { 
    }
  }
});

Angular JS Best Practices

1. Do not put the main controller into the main module, instead the main controller should be declared in a new module, this will make the application more modular e.g.

angular.module('app', ['Controller'])
angular.module('Controller', []).controller('Controller', function($scope) {
  $scope.something = 100
})

2. Do not call functions for ng-show and ng-hide directives, as it may degrade performance

3. Using too much $scope.$watch is going to degrade performance, try only watch what you really need to and remove the watchers when it's not needed anymore