我有一个在我的 DOM 中多次附加的模板。
<div ng-controller="theController">
content does not matter
</div>
所以控制器被实例化了很多次。这是一个问题,因为如果我在控制器中放置一个观察者
theController = function($scope) {
$scope.$on('myVar', function() {
// run one time for each time the template is repeated
})
}
关于如何避免这种情况的任何想法?提前致谢。
更新
好的,我会尽量清楚。
也许我有一个表单,它是基于异步请求的响应动态构建的。
<form ng-controller="formController">
<div ng-repeat="f in fields">
<ng-inclide src="f.fields"></ng-include>
</div>
</form>
控制器类似于:
function formController($scope) {
$scope.fields = [{ template:'', ... }];
// data come from an ajax request...
// here are static for the sake of simplicity.
}
所以我不知道表单中会附加哪些字段。
表单字段结构存储在 html 部分中......类似于:
<div ng-controller="inputController">
<label> .... </label>
<input type="text" .... />
</div>
或者
<div ng-controller="selectController">
<label> .... </label>
<select>
....
</select>
</div>
function selectController($scope){
$scope.$on("myCustomEvent", function(event) {
cionsole.info("Options were updated");
});
}
当表单有多个input type=text
, 或 aselect
时, inputController
, 或selectController
被多次实例化。
为什么您不希望每个实例都发生 $watch?
我想在发生特定事件时更新页面中选择之一的选项。
相反,我得到的是更新页面中的所有选择。
从评论中,我了解到在同一页面中拥有更多具有相同控制器的元素是错误的。 所以目前在我看来唯一可用的解决方案是避免为表单的每个元素定义一个控制器,对吧?
更新 2
$emit
在inputController中使用:
function inputController() {
$scope.fireclick = function(p) {
if (p == 'specificInput') {
/* this is a temporary work around
I used to bind the event only with a specific field */
$scope.$emit("myCustomEvent");
}
}
}
这是 html 部分中使用的输入字段的完整代码:
<input type="text" ng-click="fireclick(f.name);" name="{{f.name}}" />
@任何人:
至少可以确认(并最终说明原因)在同一页面上使用相同控制器的更多元素是错误的