AngularJ为多个DOM/作用域提供一个控制器

AngularJs one controller for multiple DOM/scope

本文关键字：一个 控制器 作用域 DOM AngularJ      更新时间：2023-11-30

也许标题很棘手。。。

例如，让我们使用谷歌地图Api v3。

我有一个JSON对象数组，其中包含各个城市的坐标和信息。如果我想为所有InfoWindow内容创建一个控制器（每个内容的逻辑相同，但只有数据不同），该怎么办。

要点是：在每个信息窗口中，我都想与每个位置的信息"交流"。所以我想有一个控制器并构建多个$scope实例。

我可以通过父控制器将控制器绑定到InfoWindow内容加载模板中：

$con = $compile(HTML)($scope);

然后将$con[0]作为内容推送到InfoBox（或Window）内容中。其中HTML可以是例如：

<div ng-controller="CustomCtrl">
    {{city().name}}
</div>

问题是如何将自定义变量/对象推送到CustomCtrl？该变量可以是任意变量。在体系结构中，逻辑结构是相同的，但从技术上讲，必须是不同的对象。

我试着这么做：

var content = $con[0].copyNode(false); // or true
content.customVariable = <Anything here>;
var infobox = new InfoBox({content: content,...});

通过$element[0]在"CustomCtrl"中访问.customVariable.，我什么都没有

我如何在AngularJS中解决这个问题？非常感谢。

嗯。。。这是我自己想出来的。

我的任务必须做的第一件事是，我必须为每个标记每次$compile，之后，当我初始化InfoBox（-Window无关紧要）时，我得到了那个内容实例。

然后我可以确定InfoBox内容作为html内容，作为DOM元素，必须具有唯一的实例，而不是同一个:

var elem = angular.element(city.infobox.getContent());
elem.scope().customVariable = <Anything here>

此customVariable将可在"CustomCtrl"代码中访问；）

这就像绑定到每个ng重复的"项目中的项目"一个控制器：

<li ng-repeat="item in items" ng-controller="ItemCtrl">
    {{item.name}}
</li>

在ItemCtrl闭包中，每个都将作为单独的$scope，并且item可以在那里访问：

$scope.item.any_param_or_fn();

但在我的例子中，我手动创建了所有项目，所以我必须手动进行数据绑定。

相关文章：