callmekatootie
callmekatootie

Reputation: 11228

Boolean Scope Value of a Directive

Let's say I have a directive which looks like:

<foo-bar bar-foo="booleanValue"></foo-bar>

booleanValue here belongs to the parent scope - the scope of the controller which is attached to the view in which the above directive element is located.

Now, in my directive, I have defined the directive as follows:

app.directive('fooBar', function() {
    return {
        restrict: 'E',
        scope: {
            barFoo: '=barFoo'
        },
        link: function(scope, iElement, iAttrs) {
           scope.$watch('barFoo', function() {
               if(scope.barFoo !== true) return;
           });
           //Code to execute when barFoo is true
        }
    };
});

Problem here is that the value that is passed to barFoo is a boolean value, but it ends up being a string value. Thus `if (scope.barFoo !== true) will always be a success and the linker function never executes.

I do not want to change the code to if (scope.barFoo === "true").

How do I pass a boolean value into the scope?

EDIT : I wish to add here that booleanValue is indeed a boolean value (passed as true usually) by the parent controller into the directive. Just that when the value is passed, it gets converted to string instead of remaining boolean.

Upvotes: 2

Views: 12455

Answers (1)

Alan
Alan

Reputation: 46813

Assuming the value is set properly in the controller, it should be passed as boolean to the directive.

This plunker illustrates this.

Upvotes: 2

Related Questions