AngularJS - 指令VS控制器 [英] AngularJS - Directives vs Controllers
问题描述
我想创建我的第一个应用程序使用AngularJS。不过，我如果我需要用指令为我的具体情况有点糊涂了。
我有一个简单的地图页面，在这里我需要显示所选区域的纬度/经度值。目前，我没有使用的指令在所有。我做的一切控制器，用谐音来显示结果。我不打算重用在其他任何地方我的地图视图。这就是为什么我不觉得我需要一个指令。
在另一方面，我读的地方，每一次你试图操纵DOM在你的控制器（我使用谷歌地图API做），你应该那部分转移到指令。
下面是我简单的控制器：
函数的MapViewController（$范围）{
$ scope.zoom = 6;
$ scope.lat = 37;
$ scope.lon = -122;
VAR的MapOptions = {
中心：新google.maps.LatLng（$ scope.lat，$ scope.lon）
变焦：$ scope.zoom，
mapTypeId设为：google.maps.MapTypeId.HYBRID
};
$ scope.map =新google.maps.Map（
的document.getElementById（'地图画布'）的MapOptions）; / *
*更新缩放等地图属性。
* /
google.maps.event.addListener（$ scope.map，center_changed的'，函数（）{
$范围。$应用（函数（）{
$ scope.zoom = $ scope.map.getZoom（）;
VAR中心= $ scope.map.getCenter（）;
$ scope.lat = center.lat（）;
$ scope.lon = center.lng（）;
变种界限= $ scope.map.getBounds（）;
VAR东北= bounds.getNorthEast（）;
$ scope.northEastLat = northEast.lat（）;
$ scope.northEastLon = northEast.lng（）;
VAR西南= bounds.getSouthWest（）;
$ scope.southWestLat = southWest.lat（）;
$ scope.southWestLon = southWest.lng（）;
}）;
}）; / *
*设置缩放等地图属性。
* /
google.maps.event.addListener（$ scope.map，某些事件'，函数（）{
$范围。$应用（函数（）{
...
}）;
}）; / *
*添加标记映射。
* /
google.maps.event.addListener（$ scope.map，另一个事件'，函数（）{
$范围。$应用（函数（）{
...
}）;
}）;}
这是我的谐音：
＆LT; DIV ID =地图控制器级=span4＆GT;
＆LT;窗体类=形横＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签为=inputNumber＆GT;放大：LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入类型=文本级=输入迷你占位=变焦值={{缩放}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签为=inputNumber＆GT;纬度：＆LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入类型=文本级=输入大的占位=纬度VALUE ={{纬度}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签为=inputNumber＆GT;经度：LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入类型=文本级=输入大的占位=经度值={{LON}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签为=inputNumber＆GT;东北纬度：＆LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入类型=文本级=输入大的占位=纬度VALUE ={{northEastLat}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签为=inputNumber＆GT;东北经度：LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入类型=文本级=输入大的占位=经度值={{northEastLon}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签为=inputNumber＆GT;西南纬度：＆LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入类型=文本级=输入大的占位=纬度VALUE ={{southWestLat}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签为=inputNumber＆GT;西南经度：LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
＆LT;输入类型=文本级=输入大的占位=经度值={{southWestLon}}＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / DIV＆GT;
下面是一个简单的单机答案，链接到官方的文档进行进一步的信息（增加了良好的措施服务的定义）：
http://docs.angularjs.org/guide/controller
在角，一个控制器是用于扩充角范围JavaScript构造函数。
当一个控制器通过 NG-控制器指令附加到DOM，角将实例化一个新的控制器对象，使用指定的控制器的构造函数。一个新的子范围，将可作为注射参数控制器的构造函数为 $范围。
http://docs.angularjs.org/guide/directive
在一个较高的水平，指令是告诉AngularJS的HTML编译器的DOM元素上的标记（如一个属性，元素名称，或CSS类）（ $编译）到指定的行为附加到DOM元素，甚至改造DOM元素及其子元素。
http://docs.angularjs.org/guide/services
角的服务是被连接在一起使用依赖注入（DI）替代对象。您可以使用服务来组织并在您的应用程序共享code。
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.
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.
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.
Here's my simple controller:
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 () {
...
});
});
}
And here's my partials:
<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>
Here's a brief stand-alone answer, with links to official docs for further info (definition of "services" added for good measure):
http://docs.angularjs.org/guide/controller
In Angular, a controller is a JavaScript constructor function that is used to augment the Angular scope.
When a controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new controller object, using the specified controller's constructor function. A new child scope will be available as an injectable parameter to the controller's constructor function as $scope.
http://docs.angularjs.org/guide/directive
At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even to transform the DOM element and its children.
http://docs.angularjs.org/guide/services
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
这篇关于AngularJS - 指令VS控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
