AngularJS - 指令与控制器答案

【问题标题】：AngularJS - Directives vs ControllersAngularJS - 指令与控制器
【发布时间】：2013-09-12 07:09:33
【问题描述】：

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

我有一个简单的地图页面，我需要在其中显示所选区域的纬度/经度值。目前我根本没有使用指令。我在控制器中做所有事情并使用部分来显示结果。我不打算在任何其他地方重复使用我的地图视图。这就是为什么我觉得我不需要指令。

另一方面，我在某处读到，每次您尝试在控制器中操作 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>

【问题讨论】：

标签： angularjs angularjs-directive controller

【解决方案1】：

这是一个简短的独立答案，带有指向官方文档的链接以获取更多信息（添加了“服务”的定义以更好地衡量）：

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

在 AngularJS 中，controller 是一个 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) 连接在一起的可替代对象。您可以使用服务在您的应用中组织和共享代码。

【讨论】：

请将Angular 更改为--> AngularJS。（您还引用了 AngularJS 文档而不是 Angular）。 - AngularJS 是框架的 1.x 版本。 - Angular 是另一个行为完全不同的框架的 ^2.x 版本。
@greensin 我现在就这样做了，考虑到编辑应该没有争议。

【解决方案2】：

我认为您应该只使用控制器来连接服务、依赖项和处理业务逻辑。

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

然后，如果需要，您可以将添加小部件指令放置在应用程序的其他位置，并且通常使代码库更易于遵循，如下面的Law of Demeter

知道何时何地拆分功能对我来说是 Angular 最难的事情之一，你会犯错误，但通过练习会变得更容易。

要回答这个问题，您可能应该将其拆分为一个指令，但这也是一个复杂的问题，如果您的应用程序像您所说的那样简单，您可能会发现您所拥有的一切都会好起来的。当需求发生变化时，它可能只是一个重构的案例。

【讨论】：

【解决方案3】：

我和我的同龄人在学习 AngularJS 时遇到了类似的情况。我整理了这个简单的表格，根据他们尝试在 Angular 中实现的功能类型，它应该可以为每个人提供一个很好的起点。 http://demisx.github.io/angularjs/2014/09/14/angular-what-goes-where.html

【讨论】：