javascript - 有没有办法从 Angular UI 嵌套命名 View 访问父范围？

Question

我的应用程序中有几个包含嵌套 View 的屏幕。我发现将滑入和滑出的模式对话框和面板设为具有实际 url 的实际嵌套状态比嵌入 html 中的任意 javascript 魔法更容易。我发现这种方法有利于重用和制作需要对话框和面板的新页面。它大大简化了一切。

例如，当定义为 Angular UI 状态时，模态和右侧面板的子状态可能看起来像这样:

    .state('courses.detail.courseVersion.page', {
        url: '/sections/:sectionId/pages/:pageId',
        templateUrl: 'app/courses/courses.detail.courseVersion.page.html',
        resolve: {
            page: function(Model, $stateParams) {
                {not relevant}
            }
        },
        controller: 'PageDetailController'
    })
    .state('courses.detail.courseVersion.page.edit', {
        url: '/edit',
        views: {
            'rightPanel@': {
                templateUrl: 'app/courses/courses.detail.courseVersion.page.edit.html',
                resolve: {
                    {not relevant}
                },
                controller: 'PageFormController'
            }
        }
    })
    .state('courses.detail.courseVersion.page.delete', {
        url: '/delete',
        views: {
            'modal@': {
                templateUrl: 'app/courses/courses.detail.courseVersion.deletePage.html',
                resolve: {
                    {not relevant}
                },
                controller: 'DeletePageController'
            }
        }
    })

在 DeletePageController 或 PageFormController 中，我想做的是访问 PageDetailController 中的范围。例如，如果页面的标题被编辑，我想用该信息更新父范围，而不是完全重新加载页面(这是我目前正在做的，但是这破坏了使用 ajax 的全部意义)。

我的第一直觉是查看 $scope.$parent 的值，然而，它实际上是 null。这与使用没有命名 View 的常规嵌套状态不同。

如何在不使用根作用域或自定义服务的情况下可靠地访问父作用域来解决这个问题？我只是想在父作用域上调用一个函数来更新值——这会很好地解决我的问题，但如果不使用根作用域，这看起来是不可能的。

Answer 1

虽然 Mathew Berg 已经回答您应该使用服务在 Controller 之间共享数据，但您可以共享/继承范围变量(尽管可能不鼓励)。

<div ng-controller="BaseCtrl">
<div ng-controller="InnerCtrl">
...
</div>
</div>

function BaseCtrl($scope) {
  $scope.shared = {
    fun : true
  };
}

function InnerCtrl($scope) {
  console.log('fun', $scope.shared.fun);
  $scope.shared.lol = 'always';
}

我在示例中使用了一个简单的(有效的)语法。请记住将属性放在共享对象上——不要像这样覆盖它:

function InnerCtrl($scope) {
  $scope.shared = {
    lol: 'always'
  };
}

这将断开与 BaseCtrl 持有的对象的链接。有时您需要应用多个属性，手动输入/复制它们可能很困难。您可以这样做:

function InnerCtrl($scope) {
  var model = {
    lol : 'always',
    shout: function () { console.log('yay!'); }
  };

  angular.copy($scope.shared, model); // shared now also holds lol and shout.
}