使用工厂在angularjs中的两个控制器之间进行通信

时间:2017-07-05 11:33:27

标签: angularjs

我创建了一个使用工厂在嵌套视图中的两个不同控制器之间进行通信的plunker。以下是plunker的网址。 https://plnkr.co/edit/fWA2Xugjbkf3QvHKfTa0?p=preview。 这是工厂。

routerApp.factory("widgetService",function($state){
    var callbackFunctions=[];
    var counter=0;

    var addWidget=function(name){
        callbackFunctions[0](name);
    }

    var addCallback=function(callback){
        if (callbackFunctions.length===0) {
            callbackFunctions.push(callback);
        }
    }
    return{
        addCallback: addCallback,
        addWidget: addWidget
    }
})

场景1: 1.单击"列表"主页下的菜单。 2.单击"验证"按钮。注意黄色突出显示区域的变化。来自" Chandan"的文字变化到" singh1"。 3.再次单击“验证”按钮。文字更改为" singh1"到" singh2"。所以我能够在两个控制器之间进行通信。

场景2: 1.重复方案1直到步骤2。 2.点击" PARAGRAPH"主页下的菜单。 3.单击"列表"主页下的菜单。单击验证按钮。文字不会改变。它将保持" chandan"。  当我们改变状态时,沟通不起作用。

此外,我观察到模型正在发生变化,但同样没有反映在视野中。此外,如果我们将视图绑定到rootscope,则视图会更新。 请澄清。

1 个答案:

答案 0 :(得分:0)

当您在列表和段落状态之间切换时,列表控制器将被销毁(并在下次列表时重新创建)。因此,当它被重新创建时,它会获得一个新的范围。

在您的服务中注册的callbackFunction是指控制器范围内的changeMyName()功能,因此,无论何时在您的服务中致电addWidget(),您都可以使用;实际上在旧范围内调用回调。

为了使这项工作符合预期(至少在此处的示例代码中),您必须更改服务以允许更改addCallback() - 函数中的旧回调。像这样:

var addCallback=function(callback){
    callbackFunctions[0] = callback;
}