AngularJS を使用して最初のアプリを作成しようとしています。ただし、特定のケースでディレクティブを使用する必要がある場合は、少し混乱します。
選択した地域の緯度/経度の値を表示する必要がある単純なマップ ページがあります。現時点では、ディレクティブはまったく使用していません。コントローラーですべてを行い、パーシャルを使用して結果を表示します。マップ ビューを他の場所で再利用する予定はありません。そのため、指示が必要になるとは感じませんでした。
一方、コントローラーでDOMを操作しようとするたびに（GoogleマップAPIを使用して行っています）、その部分をディレクティブに移動する必要があることをどこかで読みました。
これが私の単純なコントローラーです：
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 () {
...
});
});
}
そして、ここに私のパーシャルがあります：
<div id="map-controllers" class="span4">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputNumber">Zoom:</label>
<div class="controls">
<input type="text" class="input-mini" placeholder="zoom" value="{{ zoom }}">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputNumber">Latitude:</label>
<div class="controls">
<input type="text" class="input-large" placeholder="Latitude" value="{{ lat }}">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputNumber">Longitude:</label>
<div class="controls">
<input type="text" class="input-large" placeholder="Longitude" value="{{ lon }}">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputNumber">North East Latitude:</label>
<div class="controls">
<input type="text" class="input-large" placeholder="Latitude" value="{{ northEastLat }}">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputNumber">North East Longitude:</label>
<div class="controls">
<input type="text" class="input-large" placeholder="Longitude" value="{{ northEastLon }}">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputNumber">South West Latitude:</label>
<div class="controls">
<input type="text" class="input-large" placeholder="Latitude" value="{{ southWestLat }}">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputNumber">South West Longitude:</label>
<div class="controls">
<input type="text" class="input-large" placeholder="Longitude" value="{{ southWestLon }}">
</div>
</div>
</form>
</div>