AngularJS – 指令与控制器
我正在尝试使用AngularJS创build我的第一个应用程序。 但是，如果我需要为我的特定情况使用指令，我有点困惑。
我有一个简单的地图页面，我需要显示所选区域的纬度/经度值。 目前我没有使用指令。 我在控制器中做所有事情，并使用partials来显示结果。 我不打算在任何其他地方重复使用我的地图视图。 这就是为什么我不觉得我需要一个指令。
另一方面，我读了一个地方，每当你尝试在你的控制器（我正在使用谷歌地图API）中操作DOM时，你应该将该部分移到指令。
这是我的简单控制器：
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>
下面是一个简短的独立答案，并提供官方文档的链接以获取更多信息（添加了“服务”的定义以便更好地衡量）：
http://docs.angularjs.org/guide/controller
在Angular中， 控制器是一个JavaScript构造函数，用于扩充Angular范围。
当通过ng-controller指令将控制器连接到DOM时，Angular将使用指定的控制器的构造函数实例化一个新的控制器对象。 一个新的子作用域将作为$scope的控制器构造函数的注入参数。
http://docs.angularjs.org/guide/directive
在较高层次上， 指令是指示AngularJS的HTML编译器（ $compile ）将指定的行为附加到该DOM元素，甚至是转换DOM元素的DOM元素（例如属性，元素名称或CSS类）上的标记和它的孩子。
http://docs.angularjs.org/guide/services
angular度服务是使用dependency injection（DI）连线在一起的可替代对象。 您可以使用服务在您的应用程序中组织和共享代码。
我认为你应该只使用控制器连接服务，依赖和处理业务逻辑。
指令应该用于DOM操作，所以它非常适合处理用户交互，例如添加/编辑小部件。 这将是一个反模式，因为它不是控制器的问题，并且会被其他function所臃肿，所以将控制器的值（范围）传递给指令是很容易的。
然后，如果需要的话，您可以在应用程序的其他位置添加一个Widget指令，并且通常使得代码库更容易按照以下Demeter
知道何时何地拆分function对于我来说是Angular最困难的事情之一，你会犯错误，但是通过练习会变得更容易。
要回答这个问题，你可能应该把它分解成一个指令，但这也是一个复杂的问题。如果你的应用程序很简单，就像你说的，你可能会发现你有什么好的。 当需求发生变化时，可能会成为重构的一个例子。
在学习AngularJS的过程中，我和同事遇到了类似的情况。 我已经把这个简单的表格放在一起，应该给每个人一个良好的起点，取决于他们试图在Angular中实现什么types的function。 http://demisx.github.io/angularjs/2014/09/14/angular-what-goes-where.html
