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

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

您可以将params对象添加到video状态定义中:

A map which optionally configures parameters declared in the url, or defines additional non-url parameters.

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

添加一个带有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对象。通过上述ui-sref访问状态时，它将设置为true，否则默认为false:

angular.module('MyApp').controller('VideoCtrl', [
             '$scope', '$stateParams',
    function ($scope,   $stateParams) {
        $scope.play = $stateParams.play;
    }
]);

本来可以在代码段中添加一个有效的示例，但这在这种情况下是不可能的。代码是徒手完成的，目前无法测试，但从概念上讲应该可以工作。祝好运!