允許頂層級範圍訪問的用戶界面視圖子作用域

Question

我有一個應用程序結構如下：

application 
    * header 
    * ui-view specific menu item 
    * ui-view specific menu item 
    * ui-view specific menu item 
    * sidebar 
    * link with ui-sref 
    * link with ui-sref 
    * content 
    * ui-view 

如何才能標題菜單項訪問ui-view的範圍是什麼？

例如，當Contacts視圖處於活動狀態的header包含兩個鏈接，New Contact和Export Contacts：

<div ng-app="app"> 
    <div class="header"> 
    <a ng-click="onNewContactClicked()">New Contact</a> 
    <a ng-click="onExportContactsClicked()">Export Contacts</a> 
    </div> 
    <div class="sidebar"> 
    <a ui-sref="Calendar()"> 
    <a ui-sref="Contacts()" class="active"> 
    </div> 
    <div ui-view></div> 
</div> 

的Contacts視圖具有控制器ContactsCtrl。因此，爲了重述我的問題，菜單項New Contact如何訪問並調用ContactsCtrl中定義的函數onNewContactClicked？

有時ui-view可以嵌套。例如，Contacts視圖可以有一個Edit Contact視圖。該嵌套視圖也應該可以通過標題訪問。

Answer 1

如果您沒有通過您的路線進行導航導航（我會推薦），您可以改用事件。頭控制器可能是這個樣子，用根範圍內基於導航廣播消息：

app.controller("headerController", ['$scope', '$rootScope', function($scope, $rootScope) { 
    this.$scope = $scope; 
    this.$rootScope = $rootScope; 
    var _this = this; 
    $scope.onNewContactClicked = function() { 
     _this.$rootScope.$broadcast("newContact"); 
    }; 
    $scope.onExportContactsClicked = function() { 
     _this.$rootScope.$broadcast("exportContacts"); 
    }; 
}]); 

然後你就可以拿起的消息在其他控制器是這樣的：

app.controller("contactsController", ['$scope', function($scope) { 
    this.$scope = $scope; 
    var _this = this; 
    $scope.$on("newContact", function() { 
     _this.$scope.message = "Do new contact stuff."; 
    }); 
    $scope.$on("exportContacts", function() { 
     _this.$scope.message = "Do export stuff."; 
    }); 
}]); 

這裏一個工作小提琴：http://jsfiddle.net/jeremylikness/BPX49/

關於廣播的好處是它將被髮送到所有範圍，不管它們嵌套在什麼級別，所以你可以讓你的編輯控制器選取消息。只需添加第二個參數即可將信息作爲有效負載發送。