AngularJS - 指令与控制器
[英] AngularJS - Directives vs Controllers
本文介绍了AngularJS - 指令与控制器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 AngularJS 创建我的第一个应用程序.但是，如果我需要为我的特定情况使用指令，我有点困惑.
我有一个简单的地图页面，我需要在其中显示所选区域的纬度/经度值.目前我根本没有使用指令.我在控制器中做所有事情并使用部分来显示结果.我不打算在任何其他地方重复使用我的地图视图.这就是为什么我觉得我不需要指令.
另一方面，我在某处读到，每次您尝试在控制器中操作 DOM 时(我正在使用谷歌地图 API)，您应该将该部分移至指令.
这是我的简单控制器:
function MapViewController($scope) {$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('map-canvas'), mapOptions);/** 更新缩放和其他地图属性.*/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();});});/** 设置缩放和其他地图属性.*/google.maps.event.addListener($scope.map, 'some event', function() {$scope.$apply(function () {...});});/** 添加标记到地图.*/google.maps.event.addListener($scope.map, '另一个事件', function() {$scope.$apply(function () {...});});}
这是我的部分:
<form class="form-horizontal"><div class="control-group"><label class="control-label" for="inputNumber">缩放:</label><div class="控件"><input type="text" class="input-mini" placeholder="zoom" value="{{ zoom }}">
<div class="control-group"><label class="control-label" for="inputNumber">纬度:</label><div class="控件"><input type="text" class="input-large" placeholder="Latitude" value="{{ lat }}">
<div class="control-group"><label class="control-label" for="inputNumber">经度:</label><div class="控件"><input type="text" class="input-large" placeholder="Longitude" value="{{ lon }}">
<div class="control-group"><label class="control-label" for="inputNumber">东北纬度:</label><div class="控件"><input type="text" class="input-large" placeholder="Latitude" value="{{ northEastLat }}">
<div class="control-group"><label class="control-label" for="inputNumber">东北经度:</label><div class="控件"><input type="text" class="input-large" placeholder="Longitude" value="{{ northEastLon }}">
<div class="control-group"><label class="control-label" for="inputNumber">西南纬度:</label><div class="控件"><input type="text" class="input-large" placeholder="Latitude" value="{{ southWestLat }}">
<div class="control-group"><label class="control-label" for="inputNumber">西南经度:</label><div class="控件"><input type="text" class="input-large" placeholder="Longitude" value="{{ southWestLon }}">
</表单>
解决方案
这是一个简短的独立答案，包含指向官方文档的链接以获取更多信息(添加服务"的定义是为了更好地衡量):
http://docs.angularjs.org/guide/controller
在 AngularJS 中，控制器是一个 JavaScript 构造函数，用于扩展 AngularJS 的作用域.
当控制器通过 ng-controller 指令附加到 DOM 时，AngularJS 将使用指定控制器的构造函数实例化一个新的控制器对象.一个新的子作用域将作为 $scope 控制器的构造函数的可注入参数提供.
http://docs.angularjs.org/guide/directive
在高层次上，指令是 DOM 元素(例如属性、元素名称或 CSS 类)上的标记，它告诉 AngularJS 的 HTML 编译器($compile) 将指定的行为附加到该 DOM 元素，甚至转换 DOM 元素及其子元素.
http://docs.angularjs.org/guide/services
AngularJS 服务 是使用依赖注入 (DI) 连接在一起的可替换对象.您可以使用服务在您的应用中组织和共享代码.
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 AngularJS, a controller is a JavaScript constructor function that is used to augment the AngularJS scope.
When a controller is attached to the DOM via the ng-controller directive, AngularJS 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
AngularJS 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 - 指令与控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
