Передача логических значений с директивой AngularJS внутри другой

0

Я надеюсь, что кто-то может мне помочь :) Я немного новичок в мире угловых директив, поэтому я стараюсь сделать что-то просто. У меня есть директива внутри другой директивы, аналогичной в Reactjs. Я бы хотел пройти хотя бы мою ценность в директиве внутри

это моя часть статьи html templateUrl для статьи Директива

<div my-title-directive
 title = "Article News"
 sub-title = {{subTitle}}
 title-light = true
 sub-title-hidden = true
 section-right = {{section}}
 ico = {{ico}}
 ico-title-hidden = false>
</div>
<p class="anp">{{section}} - {{article}}</p>

je sub-title и ico одна работа отлично, но не section-right я думаю, потому что это логическое

это моя директива title

function myTitleDirective() {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment
        scope: {
            //@ reads the attribute value, = provides two-way binding, & works with functions
            title               : '@',
            titleLight          : '=',
            subTitle            : '@',
            subTitleHidden      : '=',
            sectionRight        : '=',
            ico                 : '@',
            icoTitleHidden      : '='
        },
        templateUrl: 'partials/_title.html',
        //controller: CategoryCtrl, //Embed a custom controller in the directive
        link: function (scope, element, attrs) { } //DOM manipulation
    }
};

и моя директива по статье

function myArticleDirective (){
    return {
        transclude: true,
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment
        scope: {
            //@ reads the attribute value, = provides two-way binding, & works with functions
            title           : '@',
            ico             : '@',
            section         : '=',
            subTitle        : '@',
            article         : '@'
        },
        templateUrl: 'partials/_article.html',
        //controller: CategoryCtrl, //Embed a custom controller in the directive
        link: function (scope, element, attrs) {}

и, наконец, мой шаблонUrl для моего названия

<div class="mainTitle">
    <h4 class='titleInnerSection ng-class:{ "titleLight" : !titleLight }'>{{title}} <span class='subTitleInnerSection ng-class:{ "hidden" : subTitleHidden }'>{{subTitle}}</span></h4>
</div>

<div class='categoryInnerSection ng-class:{ "hidden" : !sectionRight }'>
    <div class='icoInnerSection {{"ico" + subTitle}} '><svg><use xlink:href='{{ico}}'/></svg></div>
    <div class='catTitle ng-class:{ "hidden" : icoTitleHidden }'>{{subTitle}}</div>
</div>

вы видите, что я хотел бы сделать это, только если моя правая часть находится под ложью. Я не показываю ее, и моя директива title уже имеет эту часть, она имеет одинаковый заголовок везде, поэтому для этого я хотел бы сделать компонент внутри компонент, как в реактиве

Я уверен, что это просто, но я не знаю, почему другой переменный переменный текст проходит, но не просто true false

спасибо, ребята, за вашу помощь :)

  • 0
    Пожалуйста, поделитесь HTML с вложенной директивой
  • 0
    Это моя первая часть кода :) это директива title, которая находится внутри шаблона директивы article
Показать ещё 2 комментария
Теги:
parameter-passing
angularjs-directive
directive

1 ответ

0
Лучший ответ

je sub-title и ico одна работа отлично, но не section-right я думаю, потому что это логическое

Не используйте интерполяцию с двунаправленной привязкой:

<div my-title-directive
 title = "Article News"
 sub-title = {{subTitle}}
 title-light = true
 sub-title-hidden = true
 <!-- DONT use interpolation
 section-right = {{section}}
 -->
 <!-- INSTEAD use Angular Expression -->
 section-right = "section"
 ico = {{ico}}
 ico-title-hidden = false>
</div>
<p class="anp">{{section}} - {{article}}</p>

my-title-directive использует двунаправленную привязку для атрибута section-right:

function myTitleDirective() {
    return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment
        scope: {
            //@ reads the attribute value, = provides two-way binding, & works with functions
            title               : '@',
            titleLight          : '=',
            subTitle            : '@',
            subTitleHidden      : '=',
            sectionRight        : '=', // <<<<See bidirectional binding
            ico                 : '@',
            icoTitleHidden      : '='
        },
        templateUrl: 'partials/_title.html',
        //controller: CategoryCtrl, //Embed a custom controller in the directive
        link: function (scope, element, attrs) { } //DOM manipulation
    }
};

Интерполяция {{section}} преобразует выражения в строку. Логическое false становится строкой "false". В JavaScript строка "false" является правдой.

  • 0
    Спасибо, это отлично работает сейчас :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню