Question

我希望能够点击主页上的播放按钮，这将通过ui-sref触发状态更改到视频页面。状态更改结束后，在视频页面上，单个YouTube视频应该开始播放。只有在主页上单击播放按钮时才能播放视频。该视频不应在视频页面重新加载时播放。有人可以帮忙吗？如果不确定视频播放触发器，如果您可以提供有关如何在以下状态触发事件的信息，那将有所帮助。这是按钮标记：

    <button class="play-button" ui-sref="video"><i class="fa fa-play fa-play--sm"></i><span>PLAY</span></button>

这是我的app.js标记：

    var MyApp = angular.module("MyApp", [ 'ui.router','ui.bootstrap' ]);
    MyApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
/*** ROUTING ***/
$stateProvider
.state("home", {
    url: "/",
    controller: "HomeCtrl",
    templateUrl: "/Templates/index.html"
})

.state("video", {
    url: "/video",
    controller: "VideoCtrl",
    templateUrl: "/Templates/video.html"
})
.state('otherwise', {
    url: '/'
});

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

}]);

我在视频页面上使用youtube视频的指令。如果查看指令代码有帮助，请告诉我。

    <youtube videoid="{{fullEpvidId}}"></youtube>

Answer 1

您可以做的是将PUBLISHED对象添加到您的params州定义中：

一个映射，可以选择性地配置在url中声明的参数，或者定义其他非url参数。

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#params

添加video对象，其params属性默认为play：

false

然后在您的.state("video", { url: "/video", controller: "VideoCtrl", templateUrl: "/Templates/video.html", params: { play: false } })指令中将ui-sref参数添加到状态并将其设置为play：

true

现在，在<button class="play-button" ui-sref="video({play: true})"><i class="fa fa-play fa-play--sm"></i><span>PLAY</span></button>方法中，您可以访问VideoCtrl属性的$stateParams对象。当通过上面的play访问状态时，它将被设置为true，否则它将默认为false：

ui-sref

本来会在一个代码段中添加一个工作示例，但在这种情况下这是不可能的。代码是免费的，我现在无法测试它，但在概念上应该可行。祝你好运！

UI路由器状态更改，触发youtube视频播放下一状态

1 个答案: