AngularJS模态窗口范围

时间:2014-08-07 21:48:27

标签: javascript angularjs angularjs-scope

我的控制器范围有问题。我使用控制器作为指令,我的代码类似于这个例子:

<div ng-controller="ItemsController as itemCtrl">
   <table> .. some data ... </table>
   <a ng-click="itemCtrl.createItem()">Create new item</a>
</div>

<div id="create-form" ng-controller="ItemFormController as itemFormCtrl">
  <form ng-submit="itemFornCtrl.saveItem()">... form inputs ...</form>
</div>

<div id="edit-items" ng-controller="MultipleItemsEdit as multiEditCtrl">
   ... table with some data .... 
   <!-- I need this -->
   <a ng-click="itemCtrl.createItem()">Create new item</a>
   <!-- -->
</div>

基本上有3个孤立的范围。但是我需要打破这种隔离并从另一个范围调用方法。

我目前正在使用丑陋的“委托”类型的黑客攻击。

控制器及其方法不是那么有趣,只有有趣的方法是ItemsController.createItem():

this.createItem = function(dataCollection) { 
    angular.element( $("#create-form) ).controller().createNewItem(dataCollection);
}

和ItemFormController.createNewItem(dataCollection):

this.createNewItem = function(dataCollection) {
   ... some initialization .... 
   $("#add-item").dialog( "open" );
}

我需要在ItemFormController上调用createNewItem方法来显示模态框。但我不能直接这样做,所以我使用方法createItem获取create-form元素及其控制器并在其上调用createNewItem方法。这是一种代表。但我不喜欢它,因为我需要从我的代码的许多地方调用createNewItem,我不想用这种委托方法填充我的所有控制器。

也许我可以在某种根控制器上创建这些代理,但是没有更好的解决方案吗?

1 个答案:

答案 0 :(得分:0)

您可以通过简单地嵌套div来将编辑控制器范围嵌套在列表控制器范围内(将带有ng-controller="MultipleItemsEdit as multiEditCtrl"的div移动到带有ng-controller="ItemsController as itemCtrl"的div中)。这样你就可以直接调用这个方法了。