AngularJS - 指令与控制器

Question

我正在尝试使用AngularJS创建我的第一个应用程序.但是,如果我需要为我的特定情况使用指令,我有点困惑.

我有一个简单的Map页面,我需要显示所选区域的lat/lon值.目前我根本没有使用指令.我在控制器中执行所有操作并使用partials来显示结果.我不打算在任何其他地方重复使用我的地图视图.这就是为什么我觉得我不需要指令.

另一方面,我在某处读到,每当你试图操纵控制器中的DOM时(我正在使用google maps 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>

Answer 1

这是一个简短的独立答案,其中包含指向官方文档的链接以获取更多信息(为"好的衡量标准"添加"服务"的定义):

http://docs.angularjs.org/guide/controller

在Angular中,控制器是一个JavaScript构造函数,用于扩充Angular范围.

当控制器通过ng-controller指令附加到DOM时,Angular将使用指定的控制器的构造函数实例化一个新的控制器对象.新的子作用域将作为控制器构造函数的可注入参数提供$scope.

http://docs.angularjs.org/guide/directive

在高级别,指令是DOM元素上的标记(例如属性,元素名称或CSS类),它告诉AngularJS的HTML编译器($compile)将指定的行为附加到该DOM元素,甚至转换DOM元素及其元素儿童.

http://docs.angularjs.org/guide/services

角度服务是使用依赖注入(DI)连接在一起的可替换对象.您可以使用服务在整个应用中组织和共享代码.

Answer 2

我认为你应该只使用控制器连接服务,依赖和处理业务逻辑.

指令应该用于DOM操作,因此它非常适合处理用户交互,例如添加/编辑小部件.将它添加到控制器是一种反模式,因为它不是控制器的问题,并且它会因其他功能而变得臃肿,如果需要,很容易将控制器中的值(范围)传递给指令.

然后,您可以获得在应用程序的其他位置添加窗口小部件指令的优势,并且通常可以使代码库更容易遵循以下的Demeter法则

知道何时何地分割功能对我来说最难的事情之一就是Angular你会犯错误但是练习会变得容易.

要回答这个问题,你可能应该把它分成一个指令,但它也是一个复杂的问题,如果你的应用很简单,就像你说的那样,你可能会发现你所拥有的将是可以的.当需求发生变化时,它可能只是一种重构的情况.

Answer 3

在学习AngularJS时,我和我的同事遇到了类似的情况.我把这个简单的表放在一起,这个表应该给每个人一个很好的起点,这取决于他们试图在Angular中实现什么类型的功能.http://demisx.github.io/angularjs/2014/09/14/angular-what-goes-where.html