AngularJS绑定属性存在

Question

我希望将属性的存在绑定到AngularJS中的变量。具体来说，sandbox表示iframe。假设我将$myCtrl.allowJavascript作为变量，我想这样做：

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

当sandbox属性出现在allowJavascript == false时，我希望沙箱属性在allowJavascript == true时消失。

AngularJS有这样的机制吗？

我能找到的最接近的东西是这里，它基本上说“它只适用于某些属性”--但对沙箱不起作用。

Answer 1

对于可重用性，您可以按照以下思路将其泛化：

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}">

Answer 2

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

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