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如何访问并调用onNewContactClicked中定义的函数ContactsCtrl？

有时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/

关于广播的好处是它将被发送到所有范围，无论它们嵌套在什么级别，因此您也可以让编辑控制器接收消息。只需添加第二个参数即可将信息作为有效负载发送。

允许顶级作用域访问ui-view子作用域

1 个答案: