Angular isolate scope value can be set by "true" or empty

Question

I have a custom angular directive which for the sake of brevity we'll just call map.

It has an isolate scope set up like this.

scope: {
    latitude: '=?',
    longitude: '=?',
    draggable: '=?'
},

I normally put something in my link function which sets scope values to be either what has been set in the attribute, or a default if nothing has been set so the devoloper can add draggable="false" if they want, otherwise we'll automatically default it to true, so in the link function I would have this.

$scope.draggable = angular.isDefined($scope.draggable) ? $scope.draggable : myDefaults.draggable;

The problem is that I want all of the following to be valid uses in html

<map draggable></map>
<map draggable="true"></map>
<map draggable="false"></map>

but the first line won't work because angular.isDefined() is false.

Should I check whether it is defined first and if it isn't then use something like attrs.draggable to see if the attribute exists before falling back on the default?

If so then there is a further complication because I need to put my code in the controller not the link function (because it needs to talk to child directives) and I don't have access to "attrs" or "element" from the controller.

Any help would be much appreciated.

Captain Delano · Accepted Answer · 2015-11-20 20:11:29Z

1

If you don't want to use scope variables in your draggable attribute, just use the $attrs parameter in the directive's link function for all four of your use cases:

link: function ($scope, $element, $attrs) {
    if ("draggable" in $attrs) {
        $scope.draggable = $scope.draggable === "" || $attrs.draggable === "true";
    } else {
        $scope.draggable = myDefaults.draggable;
    }
}

Explanation: If the draggable attribute doesn't exist, it will not be in the $attrs object. If it exists but is not set, it will be equal to empty string. If it exists and is set, it will equal the string value you set it to: "true" or "false".

If you use $attrs, don't worry about assigning draggable via the scope property of your directive -- it will get overwritten.

Note, as mentioned above, this solution won't allow you to bind scope variables to the attribute. For that, you'll have to use the scope property on your directive.

For the curious, the link function.

edited Nov 20, 2015 at 20:11

answered Nov 19, 2015 at 17:23

Captain Delano

4661 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

jonhobbs Over a year ago

Thanks, but will that be true for <map draggable></map> ? unless I am wrong I think that would be false

Captain Delano Over a year ago

@jonhobbs For <map draggable></map>, $attrs.draggable will be undefined in the link function, in which case myDefaults.draggable will be used.

jonhobbs Over a year ago

Yeah, that's what I thought. I need it to be true when draggable attribute exists but is not set, that's why I'm struggling :)

Captain Delano Over a year ago

@jonhobbs I was wrong about what $attrs.draggable would equal when it existed but was not set. See my edited answer.

jonhobbs Over a year ago

That's nearly right, but it should only use the default if the attribute is omitted. If it exists and is not set it should be true, if it is set then it should be true if it is anything other than draggable='false'. However there seems to be a bigger problem here because I am using a =? binding and the more I read the more it seems as if there is no way to use a two way binding AND allow a string/bool/expression to be used optionally, so it's not possible to have draggable="'false'" and draggable="controllerScopeVariable" using the same binding.

|

Collectives™ on Stack Overflow

Angular isolate scope value can be set by "true" or empty

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related