Question

我正在制作一个允许用户输入邮政编码的视图，然后它会提供有关邮政编码（纬度，长度，城市名称等）的位置信息，以及在地图上标记位置（使用谷歌地图api）。

对于postcod部分，它非常简单，我在视图中放置了一些{{}}指令，并将相应的值分配给控制器中的$ scope。但是当谈到在谷歌地图视图上标记该位置时，它会有点混乱。以下是在Google地图中标记地点的示例代码：

var containerID = 'map-container'; // id of a DIV
var lat = 50.2;
var lng = -3.6;

var container = document.getElementById(containerID);
var options = {
  zoom: 15,
  center: new google.maps.LatLng(lat, lng),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(container, options);
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  title: markerTitle
});

正如你所看到的，代码本身只涉及渲染地图，对我来说它应该位于视图中，因为视图应该从控制器获取返回的结果，并做任何想要呈现结果的魔法。而且由于代码涉及操纵DOM，这是我认为它不应该在控制器中的另一个原因。

但我是否正确做出这个假设？

即使我是对的，我怎么能实现这个呢？

Answer 1

尝试在里面编写异步代码。

  $scope.$apply(function{

})

Answer 2

你是对的，DOM操作不应该在控制器中，但它也不应该在视图中。

Angular的方法是创建一个处理所有DOM操作的指令。这个指令是独立的并且单独工作，并且在这里做脏工作。一旦你创建了它，你就可以在视图中添加它，并从控制器传递参数。

因此视图显示元素，控制器设置模型和值，指令处理DOM操作/图形更改，值处理等等。

对你来说是好消息，我认为在你的情况下已经制定了指令，你可能想看一下：AngularUI GoogleMap Directive

Angular.js视图渲染（不仅仅显示检索到的值）

2 个答案: