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

查看:108
本文介绍了如何根据条件附加指令的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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.

我尝试过使用普通的html而不是指令,但是当我放置指令元素时,很遗憾无法工作。

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

工作

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);
    }

};

不工作

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);
    }

};

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

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!

推荐答案

您可以在UI中控制它,而不是处理控制器中的逻辑它会更容易。

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆