Angular directive with bool attribute passing string instead of bool

Question

I'm trying to create a directive that will disable all the input elements inside of the container, but I'm having trouble with the attribute. This is what I've got for the directive

Directive

angular.module('common')
    .directive('bdDisabled', [function () {
            return {
                restrict: 'A',
                scope: {
                    bdDisabled: '='
                },
                link: function (scope, element, attrs) {
                    attrs.$observe('bdDisabled', function(newValue, oldValue) {
                        if (newValue !== oldValue) {
                            if (newValue) {
                                element.find('input, select, button, submit, textarea').prop('disabled', 'disabled');
                            } else {
                                element.find('input, select, button, submit, textarea').removeProp('disabled');
                            }

                        }
                    });
                }
            };
        }
    ]);

This is how I want to use it:

<div class="cg-content cg-shadow" bd-disabled="isLoading">

The problem is that the attribute value is the string isLoading and not the value.

If I wrap it in braces it breaks and I get an error in the console. If I wrap it in braces and change the scope to '@' instead of '=', it works. But it sends the string "true" or "false", not a boolean value.

Where am I going wrong?

What happens if you switch attrs.$observe with scope.$watch ? — Omri Aharon
using @ is for passing one way binding string. You may parse it to boolean, otherwise pass it as =, which will be two way binding object — dannielum
@OmriAharon, that did it. Thanks. Please suggest it as an answer and I'll accept it. — Smeegs

Omri Aharon Omri Aharon · Accepted Answer · 2016-03-31T15:37:50

As I suggested in the comment, I'd switch the attrs.$observe with scope.$watch. On a personal preference, I'd also use the function expression instead of a string, since if you're using typescript for instance (or will use) you'll be notified if the property changes, where a string will probably remain as it is:

scope.$watch(function () {
      return scope.bdDisabled;
      }, 
      function (newVal, oldVal) {
          ...
      }
);

Angular directive with bool attribute passing string instead of bool

3 Answers