2017-02-14 74 views
0

我在兩個單獨的控制器(在兩個單獨的JS文件中)有兩段代碼;一個觸發一個Angular $scope.$broadcast事件,另一個觸發器爲$scope.$on

第一控制器(文件)片段:

var Controller1 = function($scope) { 
    $scope.triggerMyEvent = function(){ 
     $scope.$broadcast('triggeredEvent'); 
    } 
    $scope.go = function (path) { 
     $location.path(path); 
    }; 
} 

第二控制器(文件)片段:

var Controller2 = function($scope) { 
    $scope.$on('triggeredEvent',function(event){ 
     console.log('found triggered event'); 
    }); 
} 

應用程序被連接在一起,如下所示:

var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider) { 
    $routeProvider 
    .when("/page2", { 
     controller : Controller2 
     template : "/page2.html" 
    }) 
    .otherwise({ 
     template : "<p>Error</p>" 
    }); 
}); 

第一控制器由index.html文件中的ng-controller指令引用;和上面列出的其它文件,page2.html被引用,並從所述索引操作加載:

的index.html:

<body ng-controller="Controller1"> 
    <button ng-click="go('/page2.html')">Page 2</button> 
</body> 

我第一次加載這個代碼被觸發$scope.$broadcast事件和$scope.$on聽衆抓住它就好;如果我重新加載它,但$scope.$on偵聽器無法捕捉它。要清楚的是,在初始加載時,事件被觸發並捕獲得很好;所以當重新啓動我的服務器並訪問頁面。但是,如果我刷新頁面(F5),我認爲該事件正在被解僱,但未被捕獲。我是新來的,所以我假定缺乏知識,但是我已經閱讀了$ scope/$ rootScope和$ broadcast/$ emit/$ on之類的東西。任何幫助表示讚賞。我看到一些關於相關問題的文章;沒有看到任何緊密相關的事物;雖然我也注意到這篇文章:

Angular $broadcast only updating after page refresh

AngularJS event-based communication through isolate scope

最有前途的引用,我相信有關隔離範圍,但我一直沒能得到任何工作還沒有。

+0

我們需要看到你的代碼的其餘部分。這是根本沒有足夠的信息來回答你的問題。如何調用'triggerMyEvent'?有沒有相關的模板可以顯示?讓我們來看看控制器定義 –

+0

嗨,謝謝,我會嘗試添加更多相關的代碼;但是我只是簡單地調用函數並使用控制檯日誌記錄(上面未顯示)來查看它每次都被觸發。 – Gedalya

+0

我更新了代碼以提供更完整的圖片。 – Gedalya

回答

1

$broadcast$on通過範圍層次結構工作。 $broadcast向範圍層次結構向其後代發送消息。任何$on偵聽器都必須是消息從其廣播範圍的後代。如果您從$rootScope進行廣播,則每個範圍將是後代,並且每個範圍都將能夠聽取該消息。所以,一個方法,以確保您的信息是所有範圍內可達的是,像這樣以播放它:

// just to demostrate. don't put this in a controller 
$scope.triggerMyEvent = function(){ 
    $rootScope.$broadcast('triggeredEvent'); //don't do this in a controller 
} 

理想情況下,你不想與垃圾郵件根範圍。 (實際上,你應該永遠不要這樣做,如果你在控制器中使用$rootScope.$on,那麼它會更糟,因爲它每次控制器初始化時都會添加並保留一個新的偵聽器)。爲了找到問題的根源(雙關意圖),您需要關注這個層次結構,因爲這會影響您的聽衆。這個層次的

一個例子:

<div ng-controller="ParentCtrl"> 
    <div ng-controller="ChildCtrl"> 
    </div> 
</div> 

<div ng-controller="SiblingCtrl"> 
</div> 

function ParentCtrl($scope) { 
    $scope.$broadcast('parentMsg'); 
} 

function ChildCtrl($scope) { 
    $scope.$on('parentMsg', function() { 
    // will receive message 
    }); 
} 

function SiblingCtrl($scope) { 
    $scope.$on('parentMsg', function() { 
    // will not receive message 
    }); 
} 
+1

但是這可能會引發$範圍。$一個以上的時間作爲一個新的$ rootScope。$廣播將被創建每次函數被調用時。 理想使得它具有$範圍。$廣播應該是一個父類可以解決這個控制器。 – Chait

+0

例如,在服務中,沒有本地範圍。如果你想廣播一條消息,你必須使用'$ rootScope'。但是,它不應該真的在控制器內部使用 –

+0

是的,我完全同意。如你所說,我們需要更多的信息,如從 – Chait