指令和控制器

我试图创建我的第一个应用程序使用AngularJS。然而，我有点困惑，如果我需要使用指令为我的特定情况。

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

另一方面，我读的地方，每次你尝试操纵DOM在你的控制器(我正在使用谷歌地图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>

这里有一个简短的独立答案，链接到官方文档的进一步信息(“服务”的定义添加好的措施)：

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

在Angular中，控制器是一个JavaScript构造函数，用于扩展角度范围。

当控制器通过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)连接在一起的可替代对象。您可以使用服务在整个应用程式中整理和分享程式码。

原文链接：/angularjs/145815.html

猜你在找的Angularjs相关文章