Pass boolean to Directive

Question

I have a ElementReady directive:

<div elem-ready="{function:'setHeightColleagueColumn()',attribute:'{{true}}'}">

Directive:

link: (scope, elem, attrs) => {
    const attributes = scope.$eval(attrs.elemReady);
    const x = attributes.attribute === 'true';
    const z = attributes.attribute;
}

In this case x is a boolean value because it compares 2 string values which returns a boolean value. But z is a string value.

This question > AngularJS: passing boolean value to directive shows you can use {{ booleanvalue }} to pass a boolean value to a directive. But that's not working in my case because I'm sending a object.

I have to use this directive in multiple components and I can't use scope because it will give Multiple directives asking for new/isolated scope error on certain components, so I followed this suggestion:

How do I pass multiple attributes into an Angular.js attribute directive? — this answer

Any suggestions how I can pass a boolean value instead of a string value?

score 0 · Answer 1 · answered Nov 20 '19 at 16:33

Of course after rubber ducking this with Stackoverflow I see the issue:

,attribute:'{{true}}'}">

The ' enclosing the {{true}} value will make this a boolean value. Removing the single quotes fixes the issue.

Don't even need the curly bracers around the boolean value :)

score 0 · Answer 2 · answered Nov 20 '19 at 22:50

To pass a Boolean in an AngularJS expression, simply use true or false, no quotes, no curly brackets:

<div elem-ready="{fn:'setHeightColleagueColumn()', bool: true }"></div>

THE DEMO

angular.module("app",[])
.directive("elemReady", function() {
    return {
        link: postLink
    };
    function postLink(scope, elem, attrs) {
        const obj = scope.$eval(attrs.elemReady);
        console.log(typeof obj.bool, obj.bool);
    }
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <div elem-ready="{fn:'setHeightColleagueColumn()', bool: true }"></div>
</body>

Pass boolean to Directive

2 Answers2

THE DEMO