# 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() {<br></br>  return {<br></br>    restrict: 'E',<br></br>    link: function(scope, elem, attrs) {<br></br>      if (attrs.ngClick || attrs.href === '' || attrs.href === '#') {<br></br>        elem.on('click', function(e) {<br></br>          e.preventDefault();<br></br>        });<br></br>      }<br></br>    }<br></br>  };<br></br>});
    ```

### Updating Model Within Directives

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

### Making AngularJS Work with Bootstrap Vertical Button Group

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

### &lt;Enter&gt; Key Event Directive

JS:

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

HTML Usage:

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

### Passing Functions to Directives

HTML:

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

JS:

```
var app = angular.module('dr', []);<br></br><br></br>app.controller("testCtrl", function($scope) {<br></br>  $scope.color1 = "color";<br></br>    $scope.updateFn = function(msg) { <br></br>    alert(msg);<br></br>  }<br></br>});<br></br><br></br>app.directive('test', function() {<br></br>  return {<br></br>    restrict: 'E',<br></br>    scope: {<br></br>      color1: '=',<br></br>      updateFn: '&'<br></br>    },<br></br>    // object is passed while making the call<br></br>    template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>Click</button>",<br></br>    replace: true, <br></br>    link: function(scope, elm, attrs) { <br></br>    }<br></br>  }<br></br>});
```

### 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'])<br></br>angular.module('Controller', []).controller('Controller', function($scope) {<br></br>  $scope.something = 100<br></br>})
```

***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***