Question

我有一个正在实施Google地图的应用。我从JSON模型动态生成地图标记，在控制器中有一个功能。该函数在控制器中的for循环（循环JSON内容）中调用。以下是为JSON中的每个条目设置html的行：

marker.content = '<div class="infoWindowContent">' + info.desc + '<br />' + '<a href="tel:+1' + info.phone + '">' + info.phone + '</div>';

这只是我最终要做的事情的开始;还有更多的HTML。

我的问题是：有没有办法创建一个html模板并移动我的控制器中的部分内容？什么是正确的MCV处理这个问题的方法？

Answer 1

这段代码完全违背了角度哲学。您应该将您的视图直接放入html中，并使用＆＃39;双重绑定＆＃39; Angular中的机制可以使动态部件保持最新状态。

所以你的html（视图）应该是这样的：

<div class="infoWindowContent" ng-controller="myCtrl as ctrl">{{ctrl.desc}} 
  <a ng-href="tel:+1{{ctrl.info.phone}}">{{ctrl.info.phone}}
</div>

在控制器对象上，您应该定义info和desc变量：

this.info = { ... } ;

现在，只要控制器修改了变量，视图就会自动更新。您还可以使用ng-model在视图中更新这些变量，然后在控制器中自动更新它们。这就是它被称为双向绑定的原因。

Answer 2

听起来像你根据你的问题/评论想要某种类型的包含。

<script type="text/ng-template" id="map">    
    <div class="infoWindowContent" ng-controller="googleMaps as gm">
        {{gm.desc}}
        <a ng-href="tel:+1'{{gm.desc}}">{{gm.phone}}</a>
    </div>
</script>

然后你可以根据一些参数注入：

<div ng-if="showMap" ng-include="'map'"></div>

相反，您可以编写一个函数，在单击元素后获取html和数据，然后将其注入页面。

Angular MVC新手：如何将视图内容从控制器移动到视图模板？

2 个答案: