title: AngularJS - Directives vs Controllers
body: <p>I am trying to create my first app using AngularJS. However, I'm a bit confused if I need to use directives for my particular case.</p>
  
  <p>I have a simple Map page, where I need to show lat/lon value of selected region. At the moment I'm not using directives at all. I do everything in controller and use partials to display the results. I am not planning to reuse my map view in any other place. That's why I didn't feel I would need a directive.</p>
  
  <p>On the other hand, I read somewhere that every time you try to manipulate DOM in your controller(which I'm doing using google maps API), you should move that part to directives.</p>
  
  <p>Here's my simple controller:</p>
  
  <pre class="lang-js prettyprint-override"><code>function MapViewController($scope) {
    $scope.zoom = 6;
    $scope.lat = 37;
    $scope.lon = -122;
    var mapOptions = {
      center: new google.maps.LatLng($scope.lat, $scope.lon),
      zoom: $scope.zoom,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    $scope.map = new google.maps.Map(
        document.getElementById('map-canvas'), mapOptions);
  
    /*
     * Update zoom and other map attributes.
     */
    google.maps.event.addListener($scope.map, 'center_changed', function() {
      $scope.$apply(function () {
        $scope.zoom = $scope.map.getZoom();
        var center = $scope.map.getCenter();
        $scope.lat = center.lat();
        $scope.lon = center.lng();
        var bounds = $scope.map.getBounds();
        var northEast = bounds.getNorthEast();
        $scope.northEastLat = northEast.lat();
        $scope.northEastLon = northEast.lng();
        var southWest = bounds.getSouthWest();
        $scope.southWestLat = southWest.lat();
        $scope.southWestLon = southWest.lng();
      });
    });
  
    /*
     * Set zoom and other map attributes.
     */
    google.maps.event.addListener($scope.map, 'some event', function() {
      $scope.$apply(function () {
        ...
      });
    });
  
    /*
     * Add markers to map.
     */
    google.maps.event.addListener($scope.map, 'another event', function() {
      $scope.$apply(function () {
        ...
      });
    });
  
  }
  </code></pre>
  
  <p>And here's my partials:</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;div id="map-controllers" class="span4"&gt;
      &lt;form class="form-horizontal"&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputNumber"&gt;Zoom:&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-mini" placeholder="zoom" value="{{ zoom }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputNumber"&gt;Latitude:&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-large" placeholder="Latitude" value="{{ lat }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputNumber"&gt;Longitude:&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-large" placeholder="Longitude" value="{{ lon }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputNumber"&gt;North East Latitude:&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-large" placeholder="Latitude" value="{{ northEastLat }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputNumber"&gt;North East Longitude:&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-large" placeholder="Longitude" value="{{ northEastLon }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputNumber"&gt;South West Latitude:&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-large" placeholder="Latitude" value="{{ southWestLat }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="inputNumber"&gt;South West Longitude:&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="input-large" placeholder="Longitude" value="{{ southWestLon }}"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>