AngularJS Bind Attribute Presence

Question

I want to bind the presence of an attribute to a variable in AngularJS. Specifically, sandbox for an iframe. Say I have $myCtrl.allowJavascript as a variable, I want to do:

<iframe src="..." sandbox />

Where the sandbox attribute is present when allowJavascript == false, and I want the sandbox attribute to disappear when allowJavascript == true.

Does AngularJS have a mechanism for this?

The closest thing I could find was here, which basically says "it will just work for certain attributes"--but not for sandbox.

This is a potentially dangerous design. The sandbox attribute only takes effect when the iframe is navigated to. In other words, this might not do what you think it does. — user239558
– user239558, Commented Oct 24, 2013 at 11:50

Tim Stewart · Accepted Answer · 2012-10-22 12:06:13Z

3

For reusability you could make it generic along these lines:

app.directive("addAttr", function() {
  return function(scope, element, attrs) {
    scope.$watch(attrs.addAttr, function(addAttr) {
      for (var key in addAttr) {
        if (addAttr[key]) element.attr(key, true);
        else element.removeAttr(key);
      }
    }
  }
}

You'd use it like:

<iframe add-attr="{sandbox: allowJavaScript, someOtherAttr: someOtherVar}">

answered Oct 22, 2012 at 12:06

Tim Stewart

7596 silver badges8 bronze badges

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

Comments

Ben Lesh · Accepted Answer · 2012-10-21 22:56:23Z

3

You could create a custom directive for this if you wanted to.

app.directive('sandboxIf', function() {
  return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            /* eval whatever was passed to sandbox-if="" 
               to see if it's true or false. */
            if(scope.$eval(attr.sandboxIf)) {
                elem.attr('sandbox','sandbox'); //sandbox="sandbox"
            }else{
                elem.removeAttr('sandbox');
            }
        }
    };
});

use would be like:

<iframe sandbox-if="foo"></iframe>

or even

<iframe sandbox-if="test()"></iframe>

where the controller would be like

app.controller('MyCtrl', function($scope) {
   $scope.foo = true;

   $scope.test = function() {
       return true;
   };
});

answered Oct 21, 2012 at 22:56

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

1 Comment

Chuck Over a year ago

Thank you, that'll do just fine.

Collectives™ on Stack Overflow

AngularJS Bind Attribute Presence

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related