Passing Booleans with AngularJS Directive inside other one

Question

I hope than someone could help me :) I am a little newbie in the angular directive world so I try to do something simple I have a directive inside an other directive same in Reactjs I would like pass though my value to the directive inside

this is my part of article html the templateUrl for the article Directive

<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 and ico one work perfectly but not the section-right one I think it's because it's a boolean

this is my title directive

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

and my article directive

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

and finally my templateUrl for my title

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

you see what I would like to do it's just if my right section is at false I don't show it and my title directive have already this part it's the same kind of title everywhere so it's for that I would like to do a component inside a component like in React

I am sure it's simple but I don't know why the other scope variable text passing though but not a simple true false

thanks guys for your help :)

It's my first code part :) it's the title directive who is inside the article directive template — Jeff, Sep 05 '16 at 09:29
I precise something the title directive is sometimes inside the article directive sometimes not so I can't add a require I think because if my title directive is alone as usual the require don't be accepted and it won't be great :) — Jeff, Sep 05 '16 at 09:55

georgeawg · Accepted Answer · 2016-09-05T17:11:34.427

je sub-title and ico one work perfectly but not the section-right one I think it's because it's a boolean

Don't use interpolation with bidirectional binding:

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

The my-title-directive uses bidirectional binding for the section-right attribute:

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

The interpolation {{section}} convert expressions to a string. The boolean false becomes the string "false". In JavaScript, the string "false" is truthy.

Passing Booleans with AngularJS Directive inside other one

1 Answers1