javascript - AngularJS 绑定属性存在

Question

我想将属性的存在绑定到 AngularJS 中的变量。具体来说，sandbox对于一个iframe. 假设我有$myCtrl.allowJavascript一个变量，我想做：

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

当sandbox属性出现在哪里allowJavascript == false，我希望沙盒属性在什么时候消失allowJavascript == true。

AngularJS 有这个机制吗？

我能找到的最接近的东西是here，它基本上说“它只适用于某些属性”——但不适用于沙盒。

Answer 1

如果你愿意，你可以为此创建一个自定义指令。

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');
            }
        }
    };
});

使用就像：

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

甚至

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

控制器的位置

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

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

Answer 2

为了可重用性，您可以按照以下方式使其通用：

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);
      }
    }
  }
}

你会像这样使用它：

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