Question

我有一个Angular控制器，它位于页面的一部分中，但该应用程序需要访问位于其上方的HTML元素。

想象这个问题的最好方法是你有一个嵌入式视频想要请求制作完整的视图端口：

<html ng-app="videoApp">

  <body>

    <div>
      Other stuff that doesn't relate to the video player...
    </div>

    <div ng-controller="videoCtrl">
      ... stuff relating to the video controller
    </div>

  </body>
</html>

确切的问题是videoCtrl需要能够将类添加到body类，以便它可以将页面布局切换为整页并由视频控制。

期望的结果，视频应用的状态为正文标记添加了“整页”类：

<body ng-class="video.fullPage ? 'full-page', : ''">

视频将类添加到祖先标记的正确方法是什么？

在我们想要操作的元素位于正在进行操作的控制器内的正常情况下，我们可以将元素绑定到范围中的变量：

<body> <!-- the videoCtrl scope is not available to <body> -->
  <div ng-controller="videoCtrl">
    <div ng-class="video.fullPage ? 'fullPage' : ''"></div>
  </div>
</body>

然而，body标签不包含在视频控制器的范围内，因此无法访问其范围内的变量，因此我们无法绑定它们。

我们总是可以直接联系并使用dom操作改变身体上的类，但这不是 Angular 。视频控制器改变身体标签类别的正确模式是什么？

Answer 1

为了满足非常相似的要求，我使用了Angular事件。来自控制器，$broadcast $rootScope上的活动。然后让某种屏幕布局控制器处理事件并切换可能的屏幕配置。

所以：

子控制器：

$rootScope.$broadcast('layout-action', { configuration: 'video' });

布局控制器：

$scope.$on('layout-action', function(event, args) {

    if (args.configuration == 'video') {

        $scope.showVideo = true;
    }
});

<强> HTML：

<body ng-class="{'full-page': showVideo}">

*注意：这确实将子功能稍微绑定到布局的另一部分。但是，也许尝试概括视频布局。例如，您可能希望使用full screen模式。

Answer 2

如果ng-app="videoApp"是唯一的父级，您还可以在按钮上执行某些操作，这样会触发整页类：

<body ng-class="{'full-page': showVideo}">
  <div ng-controller="videoCtrl">
    <button ng-click="$parent.showVideo = !$parent.showVideo">I'm in the video controller!</button>
  </div>
</body>

在这种情况下，我只是将showVideo切换为true或false。但就像达文所说的那样，这可能不是很好，因为它更多地取决于它在应用程序中的位置。请参阅此plunkr以获取示例http://plnkr.co/edit/UxtA0YvCUckofAflsy9G

角度控制器改变祖先HTML元素的最佳方法是什么？

视频将类添加到祖先标记的正确方法是什么？

2 个答案: