Question

我正在尝试创建一个简单的html5视频播放列表应用。我在html5视频的顶部有一个叠加div，在停止和启动视频时应该出现/消失。

我有ng-show和一个变量来触发它，但是当我使用ng-inspector时它并没有改变。

我的事件可能也不太正确 - 但我似乎找不到有关将事件放在同一指令中的不同元素上的大量信息。这是一个线索，我应该把它分解成多个指令吗？

    (function() {
    'use strict';

    angular
    .module('app')
    .controller('campaignController', campaignController)
    .directive('myVideo', myvideo);

    function campaignController($log,Campaign) {
        var vm = this;
        vm.overlay = true;

        Campaign.getCampaign().success(function(data) {
            vm.campaign = data[0];
            vm.item = vm.campaign.videos[0];
        });

        vm.select = function(item) {
            vm.item = item;

        };

        vm.isActive = function(item) {
            return vm.item === item;
        };
    };

    function myvideo() {
        return {
            restrict: 'E',

            template: ['<div class="video-overlay" ng-show="vm.overlay">',
            '<p>{{ vm.campaign.name}}</p>',
            '<img class="start" src="play.png">',
            '</div>',
            '<video class="video1" controls ng-src="{{ vm.item.video_mp4_url | trusted }}" type="video/mp4"></source>',
            '</video>' ].join(''),
            link: function(scope, element, attrs) {
                scope.video = angular.element(document.getElementsByClassName("video1")[0]);
                scope.startbutton = angular.element(document.getElementsByClassName("start")[0]);


                scope.startbutton.on('click', function() {
                    scope.vm.overlay = false;
                    scope.video[0].play();

                });
                scope.video.on('click', function() {
                    scope.video[0].pause();
                    scope.vm.overlay = true;
                });

            }
        };
    }
})();

Answer 1

根据我的个人经验，角度表达式评估不能用作javascript。所以试试ng-show =＆＃34; vm.overlay == true＆＃34;。

此外，您使用本机javascript绑定点击。

要么不这样做，要使用ng-click或调用范围。$ apply（）在点击事件中回拨最后一次修改（即使我不确定它是否真的很重要）。

具有ng-show的AngularJS指令不会切换变量的变化

1 个答案: