如何在 angular 中访问另一个视图的 $scope?

How to access another view's $scope in angular?

我使用 AngularJS 构建 Web 应用程序。现在我使用 AngularJS YouTube 的嵌入插件。准确地说:https://github.com/brandly/angular-youtube-embed.

现在我通过以下事件侦听器暂停我的视频:player.pauseVideo();。我已将此添加到按钮。

YouTube 嵌入与调用上述函数在同一页面上。 该对象的标记是:

<youtube-video video-id="video" id="youtube-video" player="player" style="height:450px; width: 100%"></youtube-video>

对象的播放器属性是您应该用来在对象和函数调用之间获取 link 的属性。

但现在我还想在另一个单独的视图 html 文档中访问播放器对象。该页面上的功能不会暂停 view.html.

上的视频

有谁知道如何使用类似 player.pauseVideo();.

的调用来访问另一个页面上的对象

我假设 "player object" 你指的是范围变量 $scope.player 而 "another page" 你指的是另一个视图,具有不同的范围,渲染到播放器视图所在的同一 html 文档 中。 如果我对这些假设的看法是正确的,那么您基本上有两个选择,它们都是有效的 w.r.t。 "angular way".

使用全局控制器

您可以在 html 文档中引入一个页面范围的控制器(我们称之为 MasterController)并在那里定义 $scope.player。然后,您可以在嵌套到 MasterController 中的每个控制器中访问 $scope.player。请注意,您 不得 为嵌套控制器上的 $scope.player 赋值,因为这会阻止原型继承机制。

使用事件

angular 中的每个作用域都是 $rootScope 的子作用域。通过在需要从播放器触发功能的控制器中使用 $rootScope.$broadcast 并在播放器所连接的控制器中使用 $scope.$listen ,您可以从应用程序中的每个可能位置控制播放器。


要确定哪种方式更适合您的用例,请考虑以下属性:

  1. 事件是 'one-way roads',如果您需要从玩家范围之外检索玩家的任何值(例如,它的当前播放位置),则需要以相反的方式实现相同的机制,而使用全局控制器就像编写 $scope.player
  2. 一样简单
  3. 事件支持非耦合、可重用组件的开发。如果您要实现一个视频中心,它除了 youtube 之外还支持 vimeo 和其他平台,您可以通过使用事件抽象出所有这些不同插件的控制,只需插入新的视频平台,而无需修改其他视图控制器.

我推荐这本书“Learning JavaScript Design Patterns" by Addy Osmani and the angular guide on scopes