如何根据条件附加指令 [英] How to append directives based on conditions

问题描述

我有 2 个不同的指令.第一个返回带有实时视频的 iframe，第二个返回带有最近视频的 iframe.

条件是:如果有直播内容，则附加直播指令，否则附加最近的视频指令.

我试过用普通的 html 而不是指令，它可以工作，但是当我放置指令元素时，不幸的是不起作用.

工作

controller.js

function isLiveOn() {var liveIframe = '<h2>LIVE</h2>';var videoIframe = '<h2>VIDEO</h2>';如果(vm.live.items[0] != undefined){$('.iframe-container').append(liveIframe);} 别的 {$('.iframe-container').append(videoIframe);}};

不工作

controller.js

function isLiveOn() {var liveIframe = '<live-iframe live="vm.live.items[0]"></live-iframe>';var videoIframe = '<last-video video="vm.activity.items[0]"></last-video>';如果(vm.live.items[0] != undefined){$('.iframe-container').append(liveIframe);} 别的 {$('.iframe-container').append(videoIframe);}};

每个指令都有自己的 html 和 js 文件.类似的东西:

directive.html

<iframe ng-src="{{getIframeSrc(live.id.videoId)}}"></iframe>
<div class="live-description"><h4>{{live.snippet.title}}</h4>

directive.js

app.directive('live', live);live.$inject = ['$window'];功能现场($窗口){var 指令 = {链接:链接，限制:'EA'，templateUrl: '路径',范围: {直播:'='}};返回指令；功能链接(范围，元素，属性){scope.getIframeSrc = 函数(id){返回https://www.youtube.com/embed/"+ id；};}}

所以我认为我可能缺少的指令有问题.任何帮助将不胜感激！

解决方案

你可以在 UI 中控制它，而不是在控制器中处理逻辑，因为它会更容易.

-----其他Html代码-----<live-iframe ng-if="vm.live.items[0]" live="vm.live.items[0]"></live-iframe><last-video ng-if="!vm.live.items[0]" video="vm.activity.items[0]"></last-video>-----其他HTML代码-----

您可以从控制器中删除以下代码行

var liveIframe = '<live-iframe live="vm.live.items[0]"></live-iframe>';var videoIframe = '<last-video video="vm.activity.items[0]"></last-video>';如果(vm.live.items[0] != undefined){$('.iframe-container').append(liveIframe);} 别的 {$('.iframe-container').append(videoIframe);}

I have 2 different directives. The first one is returns an iframe with a live video, and the second returns an iframe with a recent video.

The condition is: if live content is present, append live directive, else append recent video directive.

Ive tried with normal html instead of the directives and it works, but when i put the directive element, unfortunately doesnt work.

WORKING

controller.js

function isLiveOn() {

    var liveIframe = '<h2>LIVE</h2>';
    var videoIframe = '<h2>VIDEO</h2>';

    if (vm.live.items[0] != undefined) {
        $('.iframe-container').append(liveIframe);
    } else {
        $('.iframe-container').append(videoIframe);
    }

};

NOT WORKING

controller.js

function isLiveOn() {

    var liveIframe = '<live-iframe live="vm.live.items[0]"></live-iframe>';
    var videoIframe = '<last-video video="vm.activity.items[0]"></last-video>';

    if (vm.live.items[0] != undefined) {
        $('.iframe-container').append(liveIframe);
    } else {
        $('.iframe-container').append(videoIframe);
    }

};

Each directive has its own html and js file. Something like that:

directive.html

<div class="live">
    <iframe ng-src="{{getIframeSrc(live.id.videoId)}}"></iframe>
</div>
<div class="live-description">
    <h4>{{live.snippet.title}}</h4>
</div>

directive.js

app.directive('live', live);

live.$inject = ['$window'];

function live($window) {

    var directive = {
        link: link,
        restrict: 'EA',
        templateUrl: 'path',
        scope: {
            live: '='
        }
    };

    return directive;

    function link(scope, element, attrs) {
        scope.getIframeSrc = function(id) {
            return 'https://www.youtube.com/embed/' + id;
        };
    }
} 

So im thinking its some problem with the directives that im probably missing. Any help will be appreciated!

解决方案

Instead of handling the logic in the controller you can control it in UI as it will be easier.

-----Other Html Codes-----
<live-iframe ng-if="vm.live.items[0]" live="vm.live.items[0]"></live-iframe>
<last-video ng-if="!vm.live.items[0]" video="vm.activity.items[0]"></last-video>
-----Other Html Codes-----

And you can remove following lines of code from the controller

var liveIframe = '<live-iframe live="vm.live.items[0]"></live-iframe>';
var videoIframe = '<last-video video="vm.activity.items[0]"></last-video>';

if (vm.live.items[0] != undefined) {
    $('.iframe-container').append(liveIframe);
} else {
    $('.iframe-container').append(videoIframe);
}

这篇关于如何根据条件附加指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！